Tlačítko, které počítá

Data se zatím za běhu aplikace neměnila. V aplikacích se ale mění pořád: zákazník si přidá do objednávky espresso a číslo na stránce se zvýší. Tady je tlačítko, které přesně tohle dělá:

<script setup>
import { ref } from "vue";

const pocet = ref(0);

function pridejEspresso() {
    pocet.value++;
}
</script>

<template>
    <button @click="pridejEspresso">Přidat espresso</button>
    <p>Počet espress v objednávce: {{ pocet }}</p>
</template>

V kódu jsou tři nové věci:

• import { ref } from "vue"; si vezme z Vue funkci ref, aby ji skript mohl použít, stejně jako si main.js bere createApp.
• ref(0) vytvoří ref, hodnotu, kterou Vue hlídá, tady s počáteční hodnotou 0. Ve skriptu je hodnota v pocet.value, a proto funkce zvyšuje pocet.value. V šabloně stačí napsat {{ pocet }}, bez .value.
• @click="pridejEspresso" spustí funkci pridejEspresso při každém kliknutí na tlačítko, jako to v kurzu JavaScriptu dělal addEventListener("click", pridejEspresso).

Nejdůležitější je ale to, co v kódu chybí: žádný řádek nedává nové číslo na stránku. Když se pocet.value změní, Vue aktualizuje každé místo v šabloně, které pocet ukazuje. V kurzu JavaScriptu jste po každé změně museli sami změnit textContent a snadno se na to zapomnělo.

Proč ref a .value? S obyčejnou proměnnou, let pocet = 0;, by se číslo také změnilo, jenže Vue se o tom nedozví a stránka bude dál ukazovat 0. Jak refy fungují, vysvětlí lekce Stav a události, kde se také naučíte mnohem víc o událostech. Zatím stačí postup napodobit.