Zusammenfassung

In dieser Lektion hast du gelernt:

• Zwischen {{ }} kann jeder JavaScript-Ausdruck stehen, also Code, der einen Wert ergibt: {{ preis * 8 }}, {{ name.toUpperCase() }}, {{ zusaetze.length }}, {{ zusaetze.join(", ") }} oder ein Template-Literal.
• Der Bedingungsoperator bedingung ? a : b ergibt a, wenn die Bedingung wahr ist, und b, wenn sie falsch ist: {{ geoeffnet ? "Offen" : "Geschlossen" }}. Er funktioniert überall in JavaScript.
• Eine Vorlage akzeptiert nur Ausdrücke, keine Anweisungen wie if oder for.
• Attribute, die mit v- beginnen, sind Direktiven, Anweisungen für Vue. v-bind:src="logo", kurz :src="logo", setzt ein Attribut aus Daten. Zwischen den Anführungszeichen steht ein Ausdruck, mit Texten in einfachen Anführungszeichen. :disabled="voll" fügt das Attribut hinzu, solange der Wert wahr ist. Klammern funktionieren in Attributen nicht: src="{{ logo }}" bleibt, wie es ist.
• :class="{ ausverkauft: stuecke === 0 }" gibt einem Element eine Klasse, solange eine Bedingung wahr ist, neben seinem gewöhnlichen class. Klassennamen mit Bindestrich kommen in Anführungszeichen.
• :style="{ width: stempel * 10 + '%' }" setzt Stile aus Daten, mit Namen in camelCase und Werten mit ihren Einheiten.
• Eine Vorlage kann mehrere Elemente auf oberster Ebene haben. Kommentare darin sind <!-- -->; im Skript // und /* */.

In der nächsten Lektion, State und Ereignisse, lernst du, wie Refs funktionieren und warum sie .value brauchen, und deine App reagiert auf Klicks, Eingaben und Tasten.

Aber vorher eine kleine Übung: das Schild des Cafés, das sagt, ob geöffnet ist, und ein Button zum Bestellen eines Kaffees, der nur funktioniert, solange das Café geöffnet ist.