Dzisiaj będzie o vue.js, jakiś czas temu napisałem post o podstawach vue, chciałbym dołożyć jeszcze parę brakujących rzeczy, zanim przejdziemy do single file components – link do pierwszego posta.
Warunki
Warunki w programowaniu pojawiają się od samego początku, jeśli warunek to wykonaj akcję. W vue podobny mechanizm również istnieje. Możemy wyświetlić jakiś fragment, lub ukryć w zależności od danego warunku. Utwórzmy zatem aplikację w której będziemy mieli jedną właściwość – show. Jeśli wartość show będzie true wyświetlimy div z zawartością Show, w przeciwnym wypadku z zawartością Hide.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function () { var app = new Vue({ el: '#app', data: { show: false } }) } </script> <div id="app"> <div v-if="show"> Show </div> <div v-if="!show"> Hide </div> <button v-on:click="show=!show">Show/Hide</button> </div> |
Należy zwrócić uwagę na to co się dzieję w przycisku. Dyrektywa v-on:click oznacza że przypisujemy co ma się dziać po wywołaniu click, w naszym wypadku jest to zmiana wartości show, można tutaj przypisywać fragmenty kodu lub metody. Nie będę pisał więcej o zdarzeniach bo na to będzie poświęcony osobny post.
Computed Properties
Kolejną ciekawą funkcjonalnością w vue są computed properties. Czasami same wartości w data mogą być niewystarczające. Może się zdarzyć tak, że musimy jeszcze w jakiś sposób obrobić dane, zanim będziemy chcieli z nich skorzystać. Z pomocą przychodzą nam właśnie computed properties. Załóżmy że chcemy wyświetlić liczbę, wprowadzoną przez użytkownika, podniesioną do kwadratu. Utwórzmy w data pole value oraz computed property – square, jest to po prostu funkcja. W html tworzymy input, do którego przypiszemy value oraz wyświetlimy wartość square. Aby przypisać wartość do input z vue musimy skorzystać z v-model.
1 2 3 4 5 6 7 8 |
data: { value: 0 }, computed: { square: function () { return this.value * this.value; } } |
1 2 3 4 |
<div id="app"> <input type="text" v-model="value"> {{square}} </div> |
Watched Properties
Ostatnią rzeczą dzisiaj będą watched properties. Te właściwości (funkcje) służą do śledzenia wartości jakiegoś pola. Chcemy rozwinąć poprzedni przykład, jeśli wprowadzona liczba jest parzysta, to wypiszmy w konsoli tekst parzysta, w przeciwnym wypadku wypiszmy nieparzysta. Tworzymy kolejne pole w naszej aplikacji, obok data oraz computed – watch. Następnie podajemy jaką właściwość śledzimy i jaka funkcja ma się wywołać przy zmianie wartości.
1 2 3 4 5 6 7 8 9 10 |
watch: { value: function (val) { if (val % 2 == 0) { console.log("Parzysta"); } else { console.log("Nieparzysta"); } } } |
Wystarczy tylko ustawić śledzenie, nic więcej nie musimy zmieniać w kodzie.
Kod dostępny na github – link
Jedna myśl na temat “Vue.js – Podstawy cz.2 – v-if, computed oraz watched properties.”