VueJs für Anfänger VueJs Teildatenbindung

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.

<img v-bind:src="imageUrl" alt="Example Image">

V-Modell: Die V-Modell-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:

<input v-model="message" />

Dies entspricht:

<input :value="message" @input="message = $event.target.value" />

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

<input :value="message" @input="message = $event.target.value" />

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:

<p v-if="isVisible">This is visible!</p>

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:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

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:

<button v-on:click="handleClick">Click me!</button>

Dies kann wie folgt abgekürzt werden:

<button @click="handleClick">Click me!</button>

Das obige ist der detaillierte Inhalt vonVueJs für Anfänger VueJs Teildatenbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!