Zusammenfassung

In dieser Lektion hast du gelernt:

• Vue baut die Seite aus einer Vorlage und Daten. Wenn sich die Daten ändern, aktualisiert Vue die Seite von selbst, du brauchst also kein querySelector(), textContent oder createElement().
• Eine Vue-App besteht aus ein paar Dateien: index.html mit einem leeren <div id="app">; main.js, das die Komponente App mit createApp(App).mount("#app") darin einhängt und in jeder Übung gleich ist; die Komponente selbst, App.vue; und style.css mit den Stilen der App.
• Eine .vue-Datei hat bis zu drei Teile: <script setup> mit JavaScript, <template> mit dem, was die Komponente zeigt, und <style scoped> mit CSS, das nur für diese Komponente gilt.
• {{ cafe }} in der Vorlage zeigt den Wert der Variablen cafe aus <script setup>. Einfache Klammern sind nur Text.
• Ein Wert, der sich ändert, während die App läuft, ist eine Ref: const anzahl = ref(0);, mit import { ref } from "vue"; am Anfang des Skripts. Im Skript ist ihr Wert anzahl.value, in der Vorlage nur anzahl. @click="espressoHinzufuegen" führt bei jedem Klick eine Funktion aus.
• Ein Fehler in einer Datei erscheint in Rot unter der Vorschau, mit Zeile und Spalte, und die App läuft nicht. Fehler, während die App läuft, und Warnungen von Vue, die mit [Vue warn] beginnen, erscheinen in der Konsole.

In der nächsten Lektion, Vorlagen-Syntax, schreibst du mehr als nur Namen in {{ }}: Berechnungen und die Wahl zwischen zwei Texten. Und du setzt Attribute, Klassen und Stile aus deinen Daten.

Aber vorher eine kleine Übung: der Kuchen des Tages im Café, mit einem Button zum Bestellen eines Stücks.