Die Vorlage von Vue.js wird basierend auf DOM implementiert. Dies bedeutet, dass alle VUE.JS -Vorlagen parserbar und gültig HTML sind und durch einige Besonderheiten verbessert werden. VUE-Vorlagen unterscheiden sich daher grundsätzlich von String-basierten Vorlagen, denken Sie daran.
Interpolation
Text
Die grundlegendste Form der Datenbindung ist die Textinterpolation unter Verwendung der "Schnurrbart" -Syntax (Doppelklammern):
<span> Nachricht: {{msg}} </span>
Das Schnurrbart -Tag wird durch den Wert des MSG -Attributs des entsprechenden Datenobjekts ersetzt. Es wird auch aktualisiert, wenn sich diese Eigenschaft ändert.
Sie können auch nur eine einzelne Interpolation verarbeiten, und zukünftige Datenänderungen werden keine Interpolationsaktualisierungen mehr verursachen:
<span> Dies wird sich niemals ändern: {{* msg}} </span>
Original HTML
Das Dual -Schnurrbart -Tag analysiert die Daten anstelle von HTML in einfachen Text. Um echte HTML -Zeichenfolgen auszugeben, müssen Sie drei Schnurrbart -Tags verwenden:
<div> {{{raw_html}}} </div>
Inhalt werden als HTML -Zeichenfolgen eingefügt - Datenbindung werden ignoriert. Wenn Sie Vorlagenfragmente wiederverwenden müssen, sollten Teilungen verwendet werden.
Es ist sehr gefährlich, auf einer Website ein beliebiges html dynamisch zu rendern, da es anfällig für [XSS-Angriff] ist (https://en.wikipedia.org/wiki/cross-ite_scriping). Denken Sie daran, die HTML-Interpolation nur für vertrauenswürdige Inhalte und niemals für benutzergerundete Inhalte zu verwenden.
HTML -Funktionen
Schnurrbart -Tags können auch in HTML -Attributen verwendet werden:
<div id = "item-{{id}}"> </div>
Beachten Sie, dass Interpolation nicht in Vue.js -Direktiven und Besonderheiten verwendet werden kann. Machen Sie sich keine Sorgen, wenn das Schnurrbart -Tag am falschen Ort verwendet wird, wird Vue.js eine Warnung geben.
Expression binden
Der im Schnurrbart -Tag platzierte Text wird als Bindungsausdruck bezeichnet. In Vue.js besteht ein gebundener Ausdruck aus einem einfachen JavaScript -Ausdruck und optional eine oder mehrere Filter.
JavaScript -Ausdrücke
Bisher sind unsere Vorlagen nur an einfache Attributschlüssel gebunden. Tatsächlich unterstützt Vue.js jedoch vollwertige JavaScript-Ausdrücke bei der Datenbindung:
{{Nummer + 1}}
{{ OK ? 'Ja': 'Nein'}}
{{message.split (''). Reverse (). join ('')}}
Diese Ausdrücke werden im Rahmen der VUE -Instanz bewertet, zu der sie gehören. Eine Einschränkung besteht darin, dass jede Bindung nur einen einzelnen Ausdruck enthalten kann, sodass die folgende Anweisung ungültig ist:
<!-Dies ist eine Aussage, kein Ausdruck:->
{{var a = 1}}
<!-Prozesssteuerung ist ebenfalls nicht möglich, Sie können stattdessen ternäre Ausdrücke verwenden->
{{if (ok) {return message}}}
Filter
Vue.js ermöglicht die Zugabe eines optionalen "Filters" nach einem Ausdruck, der mit "Pipeline -Zeichen" angibt:
{{message | Kapitalisieren}}
Hier verwenden wir den Wert der Ausdrucksnachricht "Pipe" zum integrierten Kapitalfilter. Dieser Filter ist eigentlich nur eine JavaScript -Funktion, die den aktivierten Wert zurückgibt. Vue.js bietet mehrere integrierte Filter an, und wir werden darüber sprechen, wie wir unsere eigenen Filter später entwickeln können.
Beachten Sie, dass die Rohrsyntax keine JavaScript -Syntax ist, sodass Filter nicht innerhalb der Ausdrücke verwendet werden können und nur zum nachträglichen Gedanken des Ausdrucks hinzugefügt werden können.
Filter können in Serie angeschlossen werden:
{{message | filtera | filterb}}
Der Filter kann auch Parameter akzeptieren:
{{message | filtera 'arg1' arg2}}
Die Filterfunktion nimmt immer den Wert des Ausdrucks als erster Parameter. Zitierte Argumente werden als Zeichenfolgen behandelt, während nicht zitierte Argumente als Ausdrücke berechnet werden. Hier wird die Zeichenfolge 'Arg1' als zweiter Parameter an den Filter übergeben, und der Wert des Ausdrucks arg2 wird als dritter Parameter berechnet.
Anweisung
Anweisungen sind besondere Funktionen mit dem Präfix V-. Der Wert der Richtlinie ist auf einen Bindungsausdruck beschränkt, sodass auch die oben genannten JavaScript -Expression und Filterregeln hier anwendbar sind. Die Verantwortung einer Anweisung besteht darin, bestimmte besondere Verhaltensweisen auf das DOM anzuwenden, wenn sich der Wert seines Ausdrucks ändert. Schauen wir beim Beispiel in "Übersicht" hin und her:
<p v-if = "Gruß"> Hallo! </p>
Hier löscht die V-IF-Anweisung das <P> -Element gemäß der Authentizität des Ausdrucksgrußwerts.
Parameter
Einige Anweisungen können nach seinem Namen und einem Dickdarm in der Mitte durch ein "Argument" getrennt werden. Beispielsweise wird die V-Bind-Anweisung verwendet, um HTML-Funktionen reaktionsmäßig zu aktualisieren:
<a v-bind: href = "url"> </a>
Hier ist HREF ein Parameter, der der V-Bind-Richtlinie angibt, das HREF-Attribut des Elements an den Wert der Expressions-URL zu binden. Möglicherweise haben Sie bemerkt, dass Sie die Feature Interpolation { % raw %} href = "{{url}}" { % endraw %} verwenden können, um dasselbe Ergebnis zu erzielen: Dies ist korrekt, und in der Tat wird die interne Merkmalsinterpolation in die V-Bind-Bindung umgewandelt.
Ein weiteres Beispiel ist die V-On-Anweisung, mit der Sie auf DOM-Ereignisse hören können:
<a v-on: click = "dosomething">
Dieser Parameter ist der Name des Ereignisses, auf das angehört wird. Wir werden auch die Ereignisbindung im Detail erklären.
Modifikator
Modifikatoren sind spezielle Suffixe, beginnend mit der halben Breite. Sie werden verwendet, um anzuzeigen, dass die Anweisungen auf besondere Weise gebunden sein sollten. Zum Beispiel sagt der .Literalmodifikator der Richtlinie, ihren Wert in eine wörtliche Zeichenfolge anstelle eines Ausdrucks zu analysieren:
<a v-bind: href.litereral = "/a/b/c"> </a>
Natürlich scheint dies keinen Sinn zu machen, da wir nur href = "/a/b/c" verwenden müssen, ohne eine einzelne Anweisung verwenden zu müssen. In diesem Beispiel wird nur die Syntax demonstrieren. Später werden wir mehr praktische Verwendungen von Modifikatoren sehen.
Abkürzung
Der V-Prefix ist ein visueller Hinweis, der eine bestimmte VUE-Funktion in einer Vorlage identifiziert. Diese Präfixe können eine gute Unterscheidung sein, wenn Sie einem vorhandenen HTML -Code ein dynamisches Verhalten hinzufügen müssen. Wenn Sie jedoch einige gemeinsame Anweisungen verwenden, werden Sie das Gefühl haben, dass es immer so realistisch und ausführlich ist. Und beim Erstellen einer einzigen Seitenanwendung (SPA) wird Vue.js alle Vorlagen verwalten, und das V-Präfix ist derzeit nicht so wichtig. Daher bietet Vue.js spezielle Abkürzungen für die beiden am häufigsten verwendeten Richtlinien V-Bind und V-on:
V-Bind-Abkürzung
<!-Komplette Syntax-> <a v-Bind: href = "url"> </a> <!-Abkürzung-> <a: href = "url"> </a> <!-komplette Syntax-> <button v-bind: deaktiviert = "SOMEYMICONDITION"> Button </button <! : Disabled = "SOMEDYNAMICCONDITION"> Button </button>
V-on-Abkürzung
<!-Vollständige Syntax-> <a v-on: click = "dosomething"> </a> <!-Abkürzung-> <a @click = "dosomething"> </a>
Sie sehen ein wenig anders aus als "legal" HTML, aber sie sind in allen VUE.JS-fähigen Browsern korrekt analysiert und erscheinen nicht im endgültigen gerenderten Tag. Die Abkürzung Grammatik ist völlig optional, aber wenn Sie Schritt für Schritt lernen, werden Sie sie froh sein, sie zu haben.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.