Data v šabloně

Šablona umí ukázat proměnné z <script setup>: název proměnné napište mezi dvojité složené závorky, {{ }}.

<script setup>
const kavarna = "Kavárna Na Rohu";
const specialita = "Mrkvový dort";
</script>

<template>
    <h1>{{ kavarna }}</h1>
    <p>Dnešní specialita: {{ specialita }}</p>
</template>

Stránka ukáže:

Kavárna Na Rohu
Dnešní specialita: Mrkvový dort

Vue dá místo {{ specialita }} hodnotu proměnné a text kolem závorek nechá, jak je. Mezery uvnitř závorek nejsou nutné, ale v kódu ve Vue se obvykle píšou.

V šabloně můžete použít každou proměnnou z <script setup>, bez dalšího kódu: žádný querySelector() ani textContent. Fungují i čísla: když je ve skriptu const cena = 85;, ukáže {{ cena }} Kč na stránce 85 Kč. A jednu proměnnou můžete ukázat na několika místech. Když kavárna změní specialitu, změníte jeden řádek skriptu a všechna místa na stránce ukážou tu novou.

Typické chyby:

• Jednoduché závorky: { specialita } se nenahradí a stránka ho ukáže tak, jak je, i se závorkami.
• Název, který skript nemá, třeba překlep {{ specilaita }}: stránka na jeho místě neukáže nic a v konzoli se objeví varování. Jak ho číst, se naučíte na konci této lekce.