Zusammenfassung

In dieser Lektion hast du gelernt:

• Vue rendert die Vorlage nur dann neu, wenn sich reaktive Daten ändern. Eine gewöhnliche Variable kann sich ändern, aber die Seite zeigt es nicht.
• ref(), importiert mit import { ref } from "vue";, erzeugt reaktiven State: const anzahl = ref(0);. Refs sind immer const: Die Ref bleibt dieselbe, ihr Wert ändert sich.
• Im Skript ist der Wert anzahl.value. In der Vorlage entpackt Vue Refs, dort heißt es nur anzahl. anzahl++ im Skript endet mit TypeError: Assignment to constant variable., und {{ anzahl.value }} in der Vorlage zeigt nichts an.
• @click ist die Kurzform von v-on:click. Sein Wert ist der Name einer Funktion, ein Aufruf mit Argumenten wie zurBestellungHinzufuegen('Espresso'), den Vue beim Klick ausführt, nicht sofort, oder eine kurze Anweisung wie anzahl++. Alles Längere gehört in eine Funktion im Skript.
• Ein Handler, der ohne Klammern angegeben ist, bekommt das Ereignisobjekt. Wenn du eigene Argumente übergibst, heißt das Ereignisobjekt $event.
• @ funktioniert mit jedem Ereignis: @input und event.target.value fürs Tippen (mit :value, um eine Ref in das Feld zu legen), @keydown.enter für die Eingabetaste sowie @mouseover und @mouseleave für die Maus.
• Eine Ref kann ein Array oder ein Objekt enthalten. push(), pop(), splice() und Änderungen von Eigenschaften wie bestellung.value.notiz = "Ohne Zucker" aktualisieren alle die Seite, und ebenso ein neues Array für .value, zum Beispiel aus filter().

In der nächsten Lektion, Bedingungen und Listen, zeigst du Teile der Seite nur, wenn eine Bedingung gilt, und erzeugst aus einem Array eine Liste mit einem Element für jeden Eintrag.

Aber vorher eine kleine Übung: eine Warteliste für die Tische des Cafés. In App.vue steht nur die Überschrift, den Rest schreibst du selbst.