Shrnutí

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

• Mezi {{ }} může být jakýkoli výraz v JavaScriptu, tedy kód, který dává hodnotu: {{ cena * 8 }}, {{ nazev.toUpperCase() }}, {{ doplnky.length }}, {{ doplnky.join(", ") }} nebo šablonový řetězec.
• Podmíněný operátor podminka ? a : b dává a, když podmínka platí, a b, když neplatí: {{ otevreno ? "Otevřeno" : "Zavřeno" }}. Funguje kdekoli v JavaScriptu.
• Šablona přijímá jen výrazy, ne příkazy jako if nebo for.
• Atributy, které začínají v-, jsou direktivy, pokyny pro Vue. v-bind:src="logo", zkráceně :src="logo", nastaví atribut z dat. V jeho uvozovkách je výraz a texty v něm jsou v jednoduchých uvozovkách. :disabled="plno" přidá atribut, dokud hodnota platí. V atributech závorky nefungují: src="{{ logo }}" zůstane, jak je.
• :class="{ prodano: kousky === 0 }" dá prvku třídu, dokud podmínka platí, vedle jeho obyčejného class. Názvy tříd se spojovníkem patří do uvozovek.
• :style="{ width: razitka * 10 + '%' }" nastaví styly z dat, s názvy v camelCase a hodnotami i s jednotkami.
• Šablona může mít na nejvyšší úrovni několik prvků. Komentáře se v ní píšou <!-- -->, ve skriptu // a /* */.

V další lekci, Stav a události, se dozvíte, jak refy fungují a proč potřebují .value, a vaše aplikace bude reagovat na kliknutí, psaní a klávesy.

Nejdřív si ale vše procvičte na ceduli kavárny, která ukazuje, jestli je otevřeno, a na tlačítku pro objednání kávy, které funguje, jen když je otevřeno.