Shrnutí

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

• Vue vykreslí šablonu znovu, jen když se změní reaktivní data. Obyčejná proměnná se změnit může, ale stránka to neukáže.
• ref(), které naimportujete pomocí import { ref } from "vue";, vytvoří reaktivní stav: const pocet = ref(0);. Refy jsou vždycky const: ref zůstává stejný, mění se jeho hodnota.
• Ve skriptu je hodnota pocet.value. V šabloně Vue refy rozbalí, takže je to jen pocet. pocet++ ve skriptu skončí chybou TypeError: Assignment to constant variable. a {{ pocet.value }} v šabloně neukáže nic.
• @click je zkratka pro v-on:click. Jeho hodnota je název funkce, volání s argumenty, třeba pridejDoObjednavky('Espresso'), které Vue spustí až při kliknutí, ne hned, nebo krátký příkaz, třeba pocet++. Cokoli delšího patří do funkce ve skriptu.
• Obsluha zapsaná názvem bez závorek dostane objekt události. Když předáváte vlastní argumenty, je objekt události $event.
• @ funguje s jakoukoli událostí: @input a event.target.value pro psaní (a :value, které dá ref do textového pole), @keydown.enter pro Enter a @mouseover a @mouseleave pro myš.
• Ref může obsahovat pole nebo objekt. Stránku aktualizují push(), pop(), splice() i změny vlastností, třeba objednavka.value.poznamka = "Bez cukru", a stejně tak nové pole pro .value, třeba z filter().

V další lekci, Podmínky a seznamy, budete ukazovat části stránky, jen když platí podmínka, a vykreslíte seznam z pole, s prvkem pro každou položku.

Nejdřív si ale vše procvičte na pořadníku na volné stoly v kavárně. App.vue má jen nadpis a zbytek napíšete sami.