Im vorherigen Blog/Artikel haben wir gelernt, wie man Komponenten erstellt, importiert und verwendet. Dieses Mal werden wir die Datenbindung in Komponenten untersuchen.

Verwenden von Daten innerhalb von Komponenten

Daten in einer Komponente definieren
Daten werden in der Funktion data() definiert und als Objekt zurückgegeben.
Hier ist ein Beispiel:

data() {
  return {
    message: 'Hello World!'
  };
}

Bindung mit Richtlinien

v-bind: HTML-Attribute an Daten binden.

v-model: Die v-model-Direktive wird für die bidirektionale Datenbindung bei Formulareingaben verwendet. Es hält den Eingabewert mit den Vue-Instanzdaten synchron. Im Wesentlichen kombiniert das V-Modell @input (das auf Änderungen wartet) und :value (das den Eingabewert festlegt). Zum Beispiel:

Dies entspricht:

So können Sie :value und @input separat verwenden:

Die v-if-Direktive rendert Elemente bedingt basierend auf einem booleschen Wert. Wenn die Bedingung wahr ist, wird das Element gerendert; wenn falsch, wird es nicht. Zum Beispiel:

This is visible!

Die v-for-Direktive wird verwendet, um ein Array oder ein Objekt zu durchlaufen, um Elemente darzustellen. Für eine bessere Leistung kann jedem Element ein eindeutiger Schlüssel zugewiesen werden. Zum Beispiel:

• {{ item.name }}

v-on
Die v-on-Direktive wird verwendet, um auf Ereignisse für Elemente zu warten. Der Einfachheit halber können Sie die Abkürzung @ verwenden. Zum Beispiel:

Click me!

Dies kann abgekürzt werden zu:

Click me!