Vlastní komponenta pomocí VueJS
Zadání
Vytvoříme komponentu, která ze zadaného roku narození vypočítá a zobrazí věk.
Řešení
Poznámka: komponenta bude velmi jednoduchá, jde jen o ukázku; nebudou se kontrolovat vstupní data.
Komponenta se bude jmenovat age, s jedním atributem born (rok narození). Použije se na webové stránce tímto způsobem: <age born="2000"></age>
Výsledkem bude zobrazený věk.
1. krok
Vue.component("age", {
template: "<span>{{age}}</span>",
});
Do HTML stránky se vykreslí obsah template, tj. <span>{{age}}</span>
Uvnitř spanu je ve dvojitých složených závorkách proměnná age (nemá nic společného s názvem komponenty!). Místo ní se vloží její hodnota, tj. vypočítaný věk.
2. krok, přidání atributu born
Vue.component("age", {
template: "<span>{{age}}</span>",
props: ["born"],
});
Přidali jsme do props atribut born, který použije naše komponenta. Tento atribut se chová jako proměnná, jejíž hodnotu zadáme. To nám umožní ji použít stylem <age born="2000"></age>
3. krok, výpočet věku
Vue.component("age", {
template: "<span>{{age}}</span>",
props: ["born"],
computed: {
age: function(){
var actYear = new Date().getFullYear();
return actYear - this.born;
}
}
});
Přidali jsme do computed výpočet age; ve funkci se do lokální proměnné actYear uloží aktuální rok, funkce vrací návratovou hodnotu příkazem return (jako rozdíl mezi aktuálním rokem a rokem narození), která se vloží do proměnné age. Její hodnota (tj. vypočítaná hodnota) se zobrazí mezi dvěma spany. Pozor, atribut born musíme uvnitř funkce zapsat jako this.born
4. použití v HTML
<age born="1974"></age> <age born="2000"></age> <age born="2007"></age>
Výsledek
Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).
