Shrnutí

V této lekci jste se naučili, že:

• Vue vytváří stránku ze šablony a dat. Když se data změní, Vue stránku automaticky aktualizuje, takže nepotřebujete querySelector(), textContent ani createElement().
• Aplikaci ve Vue tvoří několik souborů: index.html s prázdným <div id="app">; main.js, který do něj pomocí createApp(App).mount("#app") připojí komponentu App a ve všech cvičeních je stejný; samotná komponenta App.vue; a style.css se styly aplikace.
• Soubor .vue má až tři části: <script setup> s JavaScriptem, <template> s tím, co komponenta ukazuje, a <style scoped> s CSS, které platí jen pro tuto komponentu.
• {{ kavarna }} v šabloně ukáže hodnotu proměnné kavarna z <script setup>. Jednoduché závorky jsou jen text.
• Hodnotu, která se za běhu aplikace mění, uložte do refu: const pocet = ref(0);, s import { ref } from "vue"; na začátku skriptu. Ve skriptu je jeho hodnota pocet.value, v šabloně stačí pocet. @click="pridejEspresso" spustí funkci při každém kliknutí.
• Chyba v souboru se ukáže červeně pod náhledem, i s řádkem a sloupcem, a aplikace neběží. Chyby za běhu aplikace a varování Vue, která začínají [Vue warn]:, se ukážou v konzoli.

V další lekci, Šablony, budete do {{ }} psát víc než názvy: výpočty a výběr ze dvou textů. A atributy, třídy a styly nastavíte z dat.

Nejdřív si ale vše procvičte na dortu dne, který si zákazníci můžou objednat po kouscích.