Vue3-Template-Syntax

Vue verwendet eine HTML-basierte Template-Syntax, die es Entwicklern ermöglicht, das DOM deklarativ an die Daten der zugrunde liegenden Vue-Instanz zu binden.

Im Kern von Vue steht ein System, mit dem du Daten mithilfe einer prägnanten Template-Syntax deklarativ im DOM rendern kannst.

In Kombination mit dem Reaktivitätssystem kann Vue bei Änderungen des Anwendungszustands die minimalen Kosten für das erneute Rendern von Komponenten intelligent berechnen und auf DOM-Operationen anwenden.

Beispiel

<template>
  <div>
    <!--Interpolation-->
    <p>{{ message }}</p>
   
    <!-- v-bind -->
    <a :href="url">Link</a>
   
    <!-- v-auf -->
    <button @click="handleClick">Klick mich</button>
   
    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

Interpolation

Text

Die gebräuchlichste Form der Datenbindung ist die Verwendung von{{...}}Textinterpolation mit doppelten geschweiften Klammern:

Textinterpolation

<div id="app"> <p>{{ message }}</p> </div>

Selbst ausprobieren »

{{...}}Der Inhalt des Tags wird durch den Wert dermessage-Eigenschaft der entsprechenden Komponenteninstanz ersetzt; wennmessageden Eigenschaftswert ändert,{{...}}wird auch der Inhalt des Tags aktualisiert.

Wenn du den Inhalt des Tags nicht ändern möchtest, kannst duv-oncedie Direktive verwenden, um eine einmalige Interpolation durchzuführen. Wenn sich die Daten ändern, wird der Inhalt an der Interpolation nicht aktualisiert.

<span v-once>这个将不会改变: {{ message }}</span>

Html

Verwenden Sie die v-html-Direktive, um HTML-Code auszugeben:

v-html-Direktive

<div id="example1" class="demo"> <p>Textinterpolation mit doppelten geschweiften Klammern: {{ rawHtml }}</p> <p>Verwendung der v-html-Direktive:<span v-html="rawHtml"></span></p> </div> <script> const RenderHtmlApp = { data() { return { rawHtml: '<span style="color: red">Dies wird in Rot angezeigt!</span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1') </script>

Selbst ausprobieren »

Attribute

Werte in HTML-Attributen sollten die v-bind-Direktive verwenden.

<div v-bind:id="dynamicId"></div>
Für boolesche Attribute sind die üblichen Werte true oder false. Wenn der Attributwert null oder undefined ist, wird das Attribut nicht angezeigt.
<button v-bind:disabled="isButtonDisabled">按钮</button>

Im obigen Code: Wenn der Wert von isButtonDisabled null oder undefined ist, wird das Attribut disabled nicht einmal in das gerenderte <button>-Element aufgenommen.

Das folgende Beispiel prüft den Wert von use. Wenn er true ist, wird der Stil von class1 verwendet; andernfalls wird diese Klasse nicht verwendet:

v-bind-Direktive

<div id="app"> <label for="r1">Farbe ändern</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">v-bind:class-Direktive</div> </div> <script> const app = { data() { return { use: false } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Ausdrücke

Vue.js bietet vollständige Unterstützung für JavaScript-Ausdrücke.

JavaScript-Ausdrücke

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Beispiel</div> </div> <script> const app = { data() { return { ok: true, message: 'EXAMPLE!!', id: 1 } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Ausdrücke werden als JavaScript im Datenbereich der aktuell aktiven Instanz geparst. Es gibt eine Einschränkung: Jede Bindung kann nur einen einzigen Ausdruck enthalten, daher funktionieren die folgenden Beispiele nicht:

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Direktiven

Direktiven sind spezielle Attribute mit dem v-Präfix.

Direktiven werden verwendet, um bestimmte Verhaltensweisen auf das DOM anzuwenden, wenn sich der Wert eines Ausdrucks ändert. Siehe das folgende Beispiel:

Beispiel

<div id="app"> <p v-if="seen">Jetzt siehst du mich</p> </div> <script>const app = { data() { return { seen: true /* Auf false ändern, und die Nachricht wird nicht angezeigt */ } } } Vue.createApp(app).mount('#app')</script>

Selbst ausprobieren »

Hier entscheidet die v-if-Direktive anhand des Werts des Ausdrucks seen (true oder false), ob das p-Element eingefügt wird.

Es gibt viele andere Direktiven, jede mit einer bestimmten Funktion. Zum Beispiel kann die v-for-Direktive Daten aus einem Array binden, um eine Liste von Elementen zu rendern:

Beispiel

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Selbst ausprobieren »

Argumente

Argumente werden nach einer Direktive mit einem Doppelpunkt angegeben. Zum Beispiel wird die v-bind-Direktive verwendet, um HTML-Attribute reaktiv zu aktualisieren:

Beispiel

<div id="app"> <p><a v-bind:href="url">Example</a></p> </div> <script> const app = { data() { return { url: 'https://www.example.com' } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Hier ist href das Argument, das der v-bind-Direktive mitteilt, das href-Attribut des Elements an den Wert des Ausdrucks url zu binden.

Ein weiteres Beispiel ist die v-on-Direktive, die verwendet wird, um auf DOM-Ereignisse zu lauschen:

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Hier ist das Argument der Name des Ereignisses, auf das gehört wird.

Modifizierer

Modifikatoren werden durch einen halbbreiten Punkt.als spezielle Suffixe angegeben, die anzeigen, dass eine Direktive auf spezielle Weise gebunden werden soll. Zum Beispiel.preventDer Modifikator teiltv-ondie Direktive, für das ausgelöste Ereignisevent.preventDefault() aufzurufen：

<form v-on:submit.prevent="onSubmit"></form>

Benutzereingabe

Im Eingabefeld können wir die v-model-Direktive verwenden, um eine Zwei-Wege-Datenbindung zu erreichen:

Zwei-Wege-Datenbindung

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> const app = { data() { return { message: 'Example!' } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

v-modelDie Direktive wird verwendet, um eine bidirektionale Datenbindung für Formularsteuerelemente wie input, select, textarea, checkbox und radio zu erstellen. Basierend auf den Werten im Formular aktualisiert sie automatisch die Werte der gebundenen Elemente.

Für Schaltflächenereignisse können wir v-on verwenden, um auf Ereignisse zu lauschen und auf Benutzereingaben zu reagieren.

Das folgende Beispiel kehrt die Zeichenkette um, nachdem der Benutzer auf die Schaltfläche geklickt hat:

Zeichenkettenumkehr

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-Testbeispiel - Beispiel (example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Zeichenkette umkehren</button> </div> <script> const app = { data() { return { message: 'Example!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Kurzschreibweisen

v-bind-Kurzschreibweise

Vue.js bietet spezielle Kurzschreibweisen für die beiden am häufigsten verwendeten Direktiven:

<!-- 完整语法 -->
<a v-bind:href="url.html"></a>
<!-- 缩写 -->
<a :href="url.html"></a>

v-on-Kurzschreibweise

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
Andere Erweiterungen