Ein Button, der zählt

Bisher haben sich die Daten nicht geändert, während die App lief. In Apps ändern sie sich aber ständig: Ein Kunde fügt einen Espresso zur Bestellung hinzu, und die Zahl auf der Seite steigt. Hier ist ein Button, der das tut:

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

const espressos = ref(0);

function espressoHinzufuegen() {
    espressos.value++;
}
</script>

<template>
    <button @click="espressoHinzufuegen">Espresso hinzufügen</button>
    <p>Espressos in deiner Bestellung: {{ espressos }}</p>
</template>

Drei neue Dinge sorgen dafür, dass es funktioniert:

• import { ref } from "vue"; holt die Funktion ref aus Vue, damit das Skript sie verwenden kann, genau wie main.js createApp holt.
• ref(0) erstellt eine Ref, einen Wert, den Vue im Auge behält, hier mit dem Startwert 0. Im Skript steht der Wert in espressos.value, die Funktion erhöht also espressos.value. In der Vorlage schreibst du nur {{ espressos }}, ohne .value.
• @click="espressoHinzufuegen" führt bei jedem Klick auf den Button die Funktion espressoHinzufuegen aus, so wie es addEventListener("click", espressoHinzufuegen) im JavaScript-Kurs getan hat.

Das Wichtigste ist, was fehlt: Keine Zeile bringt die neue Zahl auf die Seite. Wenn sich espressos.value ändert, aktualisiert Vue jede Stelle in der Vorlage, die espressos zeigt. Im JavaScript-Kurs musstest du nach jeder Änderung selbst den textContent ändern, und man vergaß das leicht.

Warum die ref und das .value? Bei einer gewöhnlichen Variablen, let espressos = 0;, würde sich die Zahl auch ändern, aber Vue würde davon nichts wissen, und die Seite würde weiter 0 zeigen. Die Lektion State und Ereignisse erklärt, wie Refs funktionieren, und zeigt viel mehr über Ereignisse. Vorerst genügt es, dem Muster zu folgen.