Vue: cykly, Vue instance, události

47. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Cykly

Při tvorbě cyklů je nutné nastavovat pomocí v-bind:key klíč jednotlivého předmětu — často index. Proč?

Vue instance

  • hlavní instance nám říká, že vůbec Vue existuje
  • data — data, které lze používat v šabloně
  • created() — funkce, která se zavolá po tom, co je daná Vue instance vytvořena
  • mounted() — funkce, která se zavolá po tom, co se daná Vue instance vykreslí do stránky
  • destroyed() — funkce, která se zavolá po tom, co se daná Vue instance zruší
  • updated() — funkce, která se zavolá po tom, co se něco ve Vue instanci změní

Události

Události

  • další věc, co Vue umí je přiřadit nějakému prvku událost
  • když daná událost nastane, stane se něco jiného
  • definujeme metodu (stejně jako addEventListener)
  • máme k dispozici proměnou e
  • používatelné metody definujeme ve vlastnosti methods

Co říkáte na Vue?

Základy máte za sebou.

Nyní praxe!

Evidence koček

Práce

Vytvořte Vue aplikaci na evidenci jmen koček. Jména koček budeme moci přidávat (musí být unikátní) a odebírat. Prazdné jméno nepůjde přidat.

Shrnutí

Co je to webový framework? Jaké znáte?
K čemu slouží Promise.all()?
Co je to direktiva ve Vue?
Co je to undefined v JavaScriptu?
Co dělá direktiva v-bind?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/