Interpolation und Direktiven
Verwenden Sie Mustache-Interpolation und zentrale Direktiven in Templates
Interpolation und Direktiven ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Überblick über die Template-Syntax
Vue-Templates sind gültiges HTML, das um eine spezielle Syntax erweitert wird:
- Mustache-Interpolation für Text
- Direktiven (Attribute mit dem Präfix v-) für Verhalten
Vue kompiliert diese in effiziente Render-Funktionen.
Mustache-Interpolation
Die doppelten geschweiften Klammern, auch Mustache-Syntax genannt, geben Text aus.
Der Inhalt ist ein JavaScript-Ausdruck, nicht nur ein Variablenname.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind für Attribute
Mustaches funktionieren nicht innerhalb von HTML-Attributen. Verwenden Sie v-bind, um Daten an ein Attribut zu binden.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>Kurzschreibweise für v-bind
v-bind wird so häufig verwendet, dass es dafür eine Kurzschreibweise gibt: einfach einen Doppelpunkt.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on für Ereignisse
Die Direktive v-on reagiert auf DOM-Ereignisse und führt Handler aus.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>Kurzschreibweise für v-on
Auch für v-on gibt es eine Kurzschreibweise: das At-Zeichen.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Inline- und Methoden-Handler
Ereignis-Handler können Inline-Ausdrücke oder Methodennamen sein.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
Die Direktive v-text legt den Textinhalt eines Elements fest. Sie entspricht einem Mustache.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
Die Direktive v-html rendert eine Zeichenkette als echtes HTML und nicht als maskierten Text.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html und XSS-Warnung
Warnung: v-html ist bei nicht vertrauenswürdigen Inhalten gefährlich.
- Es kann schädliche Skripte einschleusen (XSS-Angriffe)
- Verwenden Sie es nur für Inhalte, denen Sie vollständig vertrauen
- Rendern Sie niemals von Benutzern übermitteltes HTML direkt
Für normalen Text sollten Sie immer die Mustache-Interpolation bevorzugen, die HTML maskiert.
Argumente von Direktiven
Einige Direktiven akzeptieren nach einem Doppelpunkt ein Argument, beispielsweise für ein bestimmtes Attribut oder Ereignis.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Schnelltest
Testen Sie Ihr Verständnis von Interpolation und Direktiven.
Zusammenfassung: Interpolation und Direktiven
Sie haben die Grundlagen von Vue-Templates kennengelernt:
- {{ }} gibt Textausdrücke mithilfe der Mustache-Syntax aus
- v-bind (Kurzschreibweise :) bindet Attribute
- v-on (Kurzschreibweise @) verarbeitet Ereignisse
- v-text legt den Textinhalt fest
- v-html rendert rohes HTML (XSS-Risiko, daher vorsichtig verwenden)
Als Nächstes geht es um Bedingungen und Schleifen.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Interpolation und Direktiven“ kostenlos?
Ja — der vollständige Text von „Interpolation und Direktiven“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Interpolation und Direktiven“?
Verwenden Sie Mustache-Interpolation und zentrale Direktiven in Templates Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „Interpolation und Direktiven“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Interpolation und Direktiven
- Bedingungen und Schleifen
- Bindungen von Attributen und Klassen