Vue.js muss jeden Tag die bidirektionale Datenbindung lernen

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：

45a2772a6b6107b401db3c9b82c049c2Message: {{ msg }}54bdf357c58b8a65c66d7c19c8e4d114

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

45a2772a6b6107b401db3c9b82c049c2This will never change: {{* msg }}54bdf357c58b8a65c66d7c19c8e4d114

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

dc6dce4a544fdca2df29d5ac0ea9906b{{{ raw_html }}}16b28748ea4df4d9c2150843fecfba68

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

02d2b8f69afd719d73188be9022421d916b28748ea4df4d9c2150843fecfba68

Beachten Sie, dass die Interpolation nicht innerhalb von Vue.js-Anweisungen und Sonderfunktionen verwendet werden kann. Machen Sie sich keine Sorgen, Vue.js gibt Ihnen eine Warnung aus, wenn das Mustache-Tag an der falschen Stelle verwendet wird.

Bindungsausdruck

Der im Mustache-Tag platzierte Text wird als Bindungsausdruck bezeichnet. In Vue.js besteht ein Bindungsausdruck aus einem einfachen JavaScript-Ausdruck und optional einem oder mehreren Filtern.

JavaScript-Ausdrücke

Bisher waren unsere Vorlagen nur an einfache Eigenschaftsschlüssel gebunden. Allerdings unterstützt Vue.js tatsächlich voll funktionsfähige JavaScript-Ausdrücke innerhalb der Datenbindung:

{{ Zahl + 1 }}

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

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

Diese Ausdrücke werden im Rahmen der Vue-Instanz ausgewertet, zu der sie gehören. Eine Einschränkung besteht darin, dass jede Bindung nur einen einzelnen Ausdruck enthalten kann. Daher ist die folgende Anweisung ungültig:

0eca288f86fb7022ce0599cd5065216f
{{ var a = 1 }}

324f843e9afe0c24967e6d37297395c7
{{ if (ok) { return message } } }

Filter

Vue.js ermöglicht das Hinzufügen eines optionalen „Filters“ nach dem Ausdruck, angezeigt durch das „Pipe-Zeichen“:

{{ message | >Hier „leiten“ wir den Wert der Ausdrucksnachricht an den integrierten Großschreibungsfilter weiter. Dieser Filter ist eigentlich nur eine JavaScript-Funktion, die den großgeschriebenen Wert zurückgibt. Vue.js bietet mehrere integrierte Filter, und wir werden später darüber sprechen, wie Sie Ihre eigenen Filter entwickeln.

Beachten Sie, dass die Pipe-Syntax keine JavaScript-Syntax ist, sodass Filter nicht innerhalb von Ausdrücken verwendet, sondern nur nach dem Ausdruck hinzugefügt werden können.

Filter können verkettet werden:

{{ message |. filterB }}

Filter können auch Parameter akzeptieren:

{{ message |. arg1' arg2 }}

Filterfunktionen verwenden immer den Wert eines Ausdrucks als erstes Argument. In Anführungszeichen gesetzte Parameter werden als Zeichenfolgen behandelt, während nicht in Anführungszeichen gesetzte Parameter als Ausdrücke ausgewertet werden. Dabei wird dem Filter als zweites Argument der String „arg1“ übergeben und als drittes Argument der Wert des Ausdrucks arg2 ausgewertet.

Direktiven

Direktiven sind spezielle Funktionen mit dem Präfix v-. Der Wert der Direktive ist auf einen verbindlichen Ausdruck beschränkt, daher gelten auch hier die oben genannten JavaScript-Ausdrucks- und Filterregeln. Die Aufgabe einer Direktive besteht darin, ein spezielles Verhalten auf das DOM anzuwenden, wenn sich der Wert seines Ausdrucks ändert. Schauen wir uns noch einmal das Beispiel in „Übersicht“ an:

fca80fab631d6c66ff12d51e112618b1Hallo!94b3e26ee717c64999d7867364b1b4a3

Hier wird die v-if-Anweisung sein Basierend auf dem Begrüßungswert „true“ oder „false“ wird das Element e388a4556c0f65e1904146cc1a846bee gelöscht/eingefügt.

Parameter

Einige Befehle können nach ihrem Namen ein „Argument“ haben, getrennt durch einen Doppelpunkt. Beispielsweise wird die v-bind-Direktive verwendet, um HTML-Funktionen responsiv zu aktualisieren:

16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed

Hier ist href Der Parameter weist die v-bind-Direktive an, das href-Attribut des Elements an den Wert der Ausdrucks-URL zu binden. Möglicherweise ist Ihnen aufgefallen, dass Sie mit der Feature-Interpolation {% raw %}href="{{url}}"{% endraw %} das gleiche Ergebnis erzielen können: Das ist korrekt, und tatsächlich wird die Feature-Interpolation intern in v-bind-Bindung konvertiert .

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

913ab33578b43051d8ce890f7743009b

Dieser Parameter ist der Name des überwachten Ereignisses. Außerdem erläutern wir die Ereignisbindung im Detail.

Modifikatoren

Modifikatoren (Modifikatoren) sind spezielle Suffixe, die mit einem halben Punkt beginnen und angeben, dass Anweisungen auf besondere Weise gebunden werden sollten. Beispielsweise weist der Modifikator .literal die Direktive an, ihren Wert als Literalzeichenfolge und nicht als Ausdruck zu analysieren:

7c0f991b5451b1dec9555cce44066b3e 5db79b134e9f6b82c0b36e0489ee08ed

Das scheint natürlich keinen Sinn zu ergeben, da wir nur href="/a/b/c" anstelle einer Direktive verwenden müssen. Dieses Beispiel dient nur zur Veranschaulichung der Syntax. Wir werden später weitere praktische Anwendungen von Modifikatoren sehen.

Abkürzung

Das v- Präfix ist ein visueller Hinweis, der eine bestimmte Vue-Funktion in der Vorlage identifiziert. Diese Präfixe können einen Unterschied machen, wenn Sie einem vorhandenen HTML-Code dynamisches Verhalten hinzufügen müssen. Aber wenn Sie einige gängige Anweisungen verwenden, werden Sie das Gefühl haben, dass das Schreiben auf diese Weise wirklich ausführlich ist. Und beim Erstellen einer Single-Page-Anwendung (SPA) verwaltet Vue.js alle Vorlagen, und das Präfix v- ist derzeit nicht so wichtig. Daher stellt Vue.js spezielle Abkürzungen für die beiden am häufigsten verwendeten Anweisungen v-bind und v-on bereit:

v-bind-Abkürzung

v-on-Abkürzung

<!-- 完整语法 -->
<a v-bind:href="url"></a>
 
<!-- 缩写 -->
<a :href="url"></a>
 
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
 
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

Sie sehen ein wenig anders aus als „legales“ HTML, werden aber in allen von Vue.js unterstützten Browsern korrekt geparst und erscheinen nicht im endgültig gerenderten Markup. Die Abkürzungssyntax ist völlig optional, aber wenn Sie Schritt für Schritt lernen, werden Sie froh sein, sie zu haben.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zur bidirektionalen Datenbindung, die Vue.js jeden Tag lernen muss, finden Sie auf der chinesischen PHP-Website!