Vue: cykly, Vue instance, události

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