V minulém díle jsme se podívali na data a metody. Dalšími užitečnými vlastnostmi Vue instance jsou Computed a Watch. K čemu slouží a jak je správně využít si řekneme právě v tomto díle.
Computed
Pokud bychom vypisovali například jméno a příjmení pouze pomocí dat, mohlo by vypsání vypadat následovně.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ name }} {{ surname }}
</div>
<script>
new Vue({
el: "#app",
data: {
name: "David",
surname: "Krupička"
}
});
</script>
</body>
</html>
V případě, že máme data která chceme “vypočítat” z jiných dat, můžeme využít právě computed. Například pro spojení jména a příjmení do jednoho by mohl vypadat kód následovně.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ nameSurname }}
</div>
<script>
new Vue({
el: "#app",
data: {
name: "David",
surname: "Krupička"
},
computed: {
nameSurname: function(){
return this.name + ' ' + this.surname;
}
}
});
</script>
</body>
</html>
I zde zafunguje správně reaktivní systém. Pokud změníte jméno nebo příjmení, tak se výsledek promítne do nameSurname. Zde jsme computed využili pro jednoduché spojení jména a příjmení. Computed ve Vue.js můžete využít například pro doplnění měny za cenu nebo jiné formátování textu.
Na příkladu také vidíte jak lze přistupovat k datům Vue instance. Je to pomocí klíčového slova this a tečkové notace. Computed bychom měli využívat k snížení výskytu logiky v HTML.
Watch
Může se stát, že chceme měnit nějaká data v závislosti na změně jiných dat. Například budeme chtít do console zalogovat každou změnu jména. Použití může vypadat jako na následujícím příkladu.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ name }}
<button v-on:click="changeName">
Změnit jméno
</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
name: "David"
},
methods: {
changeName: function(){
this.name = 'Změna';
}
},
watch: {
name: function(){
console.log(this.name);
}
}
});
</script>
</html>
V příkladu bylo přidáno tlačítko a metoda changeName. Po kliknutí na tlačítko se volá tato metoda, která pouze změní hodnotu data name. Watcher pro sledování dat name obsahuje funkci, která se provede vždy, když watcher zaznamená změnu hodnoty name
Komentáře
Johny
01.03.2020 22:20
Super tutoriál, teším sa na ďalšie diely, len novinky iba na twiteri zachytím ? .. lebo twiter nemám, tak reku či by nešlo aj cez fb sledovať
Zanechte komentář