Vue
Vue dělá z HTML šablon a trochy JavaScriptu webové aplikace, které se samy aktualizují. Postavíte s ním aplikaci na objednávky pro kavárnu, s nabídkou, objednávkou a cenou celkem.
Lekce
Lekce 1
Úvod do Vue
Vyznejte se v souborech aplikace ve Vue a v částech souboru .vue, ukazujte data a opravujte chyby.
Za lekci získáte 75 XP
Lekce 2
Šablony
Vkládejte do šablon výrazy ve složených závorkách a nastavujte atributy, třídy a styly podle dat.
Za lekci získáte 95 XP
Lekce 3
Stav a události
Rozhýbejte stránku pomocí ref() a .value, reagujte na kliknutí, psaní a klávesy a měňte pole i objekty.
Za lekci získáte 120 XP
Lekce 4
Podmínky a seznamy
Pomocí v-if a v-show rozhodněte, co se ukáže, a udělejte z pole seznam s v-for, filtrovaný i seřazený.
Za lekci získáte 100 XP
Miniprojekt
Seznam na výlet
Postavte seznam na výlet, který věci balí, počítá je, skryje zabalené a odebere, co nepotřebujete.
Za lekci získáte 35 XP
Co vytvoříte index.html
Lekce 6
Formuláře
Propojte textová pole, rozbalovací seznamy a zaškrtávací políčka přes v-model, odesílejte formuláře a hlaste chyby.
Za lekci získáte 100 XP
Lekce 7
Vypočítané hodnoty a sledování
Počítejte součty a filtrované seznamy pomocí computed() a spouštějte kód při změně dat pomocí watch().
Za lekci získáte 80 XP
Miniprojekt
Rozpočet
Postavte rozpočet, který kontroluje nové výdaje, sčítá je podle kategorií a ukládá celý měsíc.
Za lekci získáte 35 XP
Co vytvoříte index.html
Lekce 9
Komponenty
Rozdělte stránku na komponenty .vue, propojte je pomocí import a export a předávejte jim data v props.
Za lekci získáte 85 XP
Lekce 10
Události komponent
Posílejte z komponent události přes emit, držte jediný zdroj pravdy a dejte v-model i vlastním komponentám.
Za lekci získáte 70 XP
Lekce 11
Sloty
Vkládejte do komponent obsah přes sloty, dejte jim náhradní obsah a plňte pojmenované sloty.
Za lekci získáte 60 XP
Miniprojekt
Fotogalerie
Postavte fotogalerii s dlaždicemi, velkou fotkou v lightboxu a tlačítky na další a předchozí fotku.
Za lekci získáte 35 XP
Co vytvoříte index.html
Lekce 13
Životní cyklus a data
Načítejte data v onMounted, ukažte, když se načtení nepovede, zastavujte časovače a pamatujte si oblíbené.
Za lekci získáte 85 XP
Lekce 14
Composables
Přesuňte logiku do composables pro opakované použití, třeba do refu, který se sám ukládá, nebo do načítání.
Za lekci získáte 65 XP
Lekce 15
Závěrečný projekt
Postavte aplikaci na návyky, která je načte, ukáže váš postup, uloží, co jste splnili, a počítá dny v řadě.
Za lekci získáte 75 XP
Co vytvoříte index.html
O kurzu
Vue je oblíbený framework pro tvorbu webových aplikací, známý tím, že se s ním snadno začíná. Kurz projde šablony, reaktivní stav a události, seznamy a podmínky, formuláře s v-model, vypočítané hodnoty a sledování změn, komponenty s props, událostmi a sloty, načítání dat i composables.
Je určený těm, kdo znají HTML, CSS a JavaScript. Krok za krokem postavíte aplikaci na objednávky pro kavárnu, seznam věcí na výlet, sledování rozpočtu a fotogalerii a v závěrečném projektu aplikaci na sledování návyků, která si pamatuje, jak se vám daří.