Vue.js – Podstawy cz.2 – v-if, computed oraz watched properties.

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.

<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.

data: {
    value: 0
},
computed: {
    square: function () {
        return this.value * this.value;
    }
}

<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.

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