Vorlagensyntax


In der zugrunde liegenden Implementierung kompiliert Vue Vorlagen in virtuelle DOM-Rendering-Funktionen. In Kombination mit dem reaktionsfähigen System kann Vue intelligent berechnen, wie viele Komponenten neu gerendert werden müssen, und die Anzahl der DOM-Operationen minimieren.

Wenn Sie mit virtuellem DOM vertraut sind und die pure Leistung von JavaScript bevorzugen, können Sie die Renderfunktion auch direkt ohne Vorlagen schreiben und dabei die optionale JSX-Syntax verwenden.


Inhaltsverzeichnis


Interpolation


Text

Die häufigste Form der Datenbindung ist die Verwendung der „Mustache“-Syntax (doppelte geschweifte Klammern) Textinterpolation: 

<span>Message: {{ msg }}</span>

Mustache-Tags werden durch den Wert des msg-Attributs im entsprechenden Datenobjekt ersetzt. Immer wenn sich die Eigenschaft msg des gebundenen Datenobjekts ändert, wird der Inhalt am Interpolationspunkt aktualisiert.

Mit dem Befehl v-once können Sie auch eine einmalige Interpolation durchführen. Wenn sich die Daten ändern, wird der Inhalt bei der Interpolation nicht aktualisiert. Bitte beachten Sie jedoch, dass sich dies auf andere Datenbindungen auf dem Knoten auswirkt: 

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


raw HTML

Doppelte geschweifte Klammern interpretieren die Daten als normalen Text statt als HTML-Code. Um echtes HTML auszugeben, müssen Sie die v-html-Direktive verwenden: 

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

1.jpg

Der Inhalt dieses span wird durch den Attributwert rawHtml direkt als HTML ersetzt – die Datenbindung im analysierten Attributwert wird ignoriert. Beachten Sie, dass Sie v-html nicht zum Erstellen von Teilvorlagen verwenden können, da Vue keine stringbasierte Vorlagen-Engine ist. Im Gegensatz dazu eignen sich Komponenten für Benutzeroberflächen (UIs) besser als Basiseinheiten, die wiederverwendbar und zusammensetzbar sind.

Beliebig dynamisch gerendertes HTML auf Ihrer Website kann sehr gefährlich sein, da es leicht zu XSS-Angriffen führen kann. Bitte verwenden Sie die HTML-Interpolation nur mit vertrauenswürdigen Inhalten und nie mit vom Benutzer bereitgestellten Inhalten.


Funktionen

Die Moustache-Syntax kann nicht auf HTML-Funktionen angewendet werden wobei v-bind verwendet werden sollte Direktive : 

<div v-bind:id="dynamicId"></div>

Für boolesche Eigenschaften (die einfach existieren, bedeutet, dass der Wert true ist) funktioniert v-bind etwas anders, in diesem Beispiel: 

<button v-bind:disabled="isButtonDisabled">Button</button>

Wenn der Wert von isButtonDisabled ist null, undefined oder false, dann disabled Eigenschaften sind nicht einmal im gerenderten <button>-Element enthalten.


Verwendung von JavaScript-Ausdrücken

Bisher haben wir in unseren Vorlagen nur einfache Eigenschaftsschlüsselwerte gebunden. Tatsächlich bietet Vue.js jedoch für alle Datenbindungen vollständige Unterstützung für JavaScript-Ausdrücke. 

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

Diese Ausdrücke werden als JavaScript im Datenbereich der Vue-Instanz, zu der sie gehören, geparst. Es besteht die Einschränkung, dass jede Bindung nur einen einzelnen Ausdruck enthalten kann, sodass die folgenden Beispiele nicht wirksam werden. 

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

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

Vorlagenausdrücke werden in einer Sandbox platziert und können nur auf eine Whitelist globaler Variablen wie Math und Date zugreifen. Sie sollten nicht versuchen, in Vorlagenausdrücken auf benutzerdefinierte globale Variablen zuzugreifen.


Direktiven

Direktiven haben v- besondere Eigenschaften von Präfixen . Es wird erwartet, dass der Wert des Direktivenattributs ein einzelner JavaScript-Ausdruck ist (v-for ist die Ausnahme, die wir später besprechen werden). Die Aufgabe der Direktive besteht darin, die damit verbundenen Auswirkungen reaktiv auf das DOM anzuwenden, wenn sich der Wert des Ausdrucks ändert. Erinnern Sie sich an das Beispiel, das wir in der Einleitung gesehen haben: 

<p v-if="seen">现在你看到我了</p>

Hier fügt die v-if-Direktive seen-Elemente ein/entfernt, je nachdem, ob der Ausdruck <p> als wahr oder falsch ausgewertet wird.


Parameter

Einige Befehle können einen „Parameter“ akzeptieren, der durch einen Doppelpunkt nach dem Befehlsnamen dargestellt wird. Beispielsweise kann die v-bind-Direktive verwendet werden, um HTML-Attribute reaktiv zu aktualisieren: 

<a v-bind:href="url">...</a>

wobei href ein Parameter ist, der die v-bind-Direktive anweist, das href-Attribut des Elements mit dem Ausdruck < zu kombinieren 🎜>Wertbindung. url

Ein weiteres Beispiel ist die

-Direktive, die zum Abhören von DOM-Ereignissen verwendet wird: v-on

<a v-on:click="doSomething">...</a>

Der Parameter hier ist der Name des Ereignisses, das abgehört werden soll. Wir werden auch die Ereignisbehandlung ausführlicher besprechen.


Dynamische Parameter

2.6.0 Neu hinzugefügt

Ab 2.6.0 kann es in eckige Klammern eingeschlossen werden JavaScript-Ausdruck als Parameter eines Befehls: 

<a v-bind:[attributeName]="url"> ... </a>

Hier wird

dynamisch als JavaScript-Ausdruck ausgewertet und der erhaltene Wert wird als endgültiger Parameter verwendet. Wenn Ihre Vue-Instanz beispielsweise eine attributeName-Eigenschaft data mit dem Wert attributeName hat, dann entspricht diese Bindung "href". v-bind:href

In ähnlicher Weise können Sie dynamische Parameter verwenden, um eine Handlerfunktion an einen dynamischen Ereignisnamen zu binden: 

<a v-on:[eventName]="doSomething"> ... </a>

In ähnlicher Weise gilt, dass

gilt, wenn der Wert von eventName "focus" ist entspricht v-on:[eventName]. v-on:focus

Einschränkungen für die Werte dynamischer Parameter

Von dynamischen Parametern wird erwartet, dass sie zu einer Zeichenfolge ausgewertet werden, wobei der Ausnahmewert

ist. Dieser spezielle null-Wert kann verwendet werden, um Bindungen explizit zu entfernen. Jeder andere Wert, der kein String ist, löst eine Warnung aus. null

Einschränkungen für dynamische Parameterausdrücke

Dynamische Parameterausdrücke unterliegen einigen Syntaxbeschränkungen, da bestimmte Zeichen wie Leerzeichen und Anführungszeichen im HTML-Attributnamen platziert werden ist ungültig. Ebenso müssen Sie die Großschreibung von Schlüsselnamen vermeiden, wenn Sie Vorlagen im DOM verwenden.

Zum Beispiel ist der folgende Code ungültig: 

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

Eine Problemumgehung besteht darin, einen Ausdruck ohne Leerzeichen oder Anführungszeichen zu verwenden oder einen solch komplexen Ausdruck durch eine berechnete Eigenschaft zu ersetzen.

Auch wenn Sie Vorlagen im DOM verwenden (direkt in einem HTML Datei), müssen Sie beachten, dass der Browser alle Funktionsnamen in Kleinbuchstaben umwandelt: 

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>


Modifier

Der Modifikator ist eine Halbwertsperiode. Ein spezielles Suffix, das angibt, dass eine Direktive auf besondere Weise gebunden werden sollte. Beispielsweise weist der Modifikator

die Direktive .prevent an, v-on für das Ereignis aufzurufen, das ausgelöst wird: event.preventDefault()

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

gefolgt von

v-on und v-for Wenn Sie andere Funktionen erkunden, werden Sie weitere Beispiele für Modifikatoren sehen.


Das Präfix

Abkürzung

v- dient als visueller Hinweis zur Identifizierung Vue-spezifischer Funktionen in der Vorlage. Das Präfix v- ist hilfreich, wenn Sie Vue.js verwenden, um dynamisches Verhalten zu vorhandenen Tags hinzuzufügen. Bei einigen häufig verwendeten Anweisungen kann die Verwendung jedoch umständlich sein. Gleichzeitig verliert das Präfix an Bedeutung, wenn eine Einzelseitenanwendung (SPA – Single Page Application)v- erstellt wird, in der Vue alle Vorlagen verwaltet. Daher bietet Vue spezifische Abkürzungen für die beiden am häufigsten verwendeten Anweisungen v-bind und v-on:


v- bind Abkürzung

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

<!-- 缩写 -->
<a :href="url">...</a>

…


v-on Die Abkürzungen 

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

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

…

Sie sehen möglicherweise etwas anders aus als normales HTML, aber sowohl : als auch @ sind zulässige Zeichen für Eigenschaftsnamen und können analysiert werden korrekt in allen Browsern, die Vue unterstützen. Außerdem werden sie nicht im endgültig gerenderten Markup angezeigt. Die Abkürzungssyntax ist völlig optional, aber wenn Sie ihre Rolle besser verstehen, werden Sie froh sein, sie zu haben.