Vue.js-Vorlage Einführung

Vue.js, das zum Erstellen von Benutzeroberflächen (UIs) und Single-Page-Anwendungen (SPAs) verwendet wird, vereint viele der besten Funktionen der JavaScript-Frameworks Angular und React, und viele Entwickler verwenden gerne Vue.js, weil es eine neutrale Umgebung bietet.

Wie HTML, Vue.js hat eine Vorlagensyntax, und wir können die Vorlagensyntax verwenden, um das DOM mit den Komponentendaten zu binden. In diesem Artikel zeigen wir Ihnen, wie Sie Daten in die Vorlagensyntax einfügen und wie Sie verschiedene Datentypen interpolieren.

Textinterpolation

Wenn wir eine Variable aus der relativen Komponenteninstanz binden möchten, können wir doppelte geschweifte Klammern verwenden, die auch als „Schnurrbart“-Syntax bezeichnet wird.

linuxhintText

Vue.js bietet eine Zwei-Wege-Bindung, was bedeutet, dass jedes Mal, wenn der Wert einer Variablen geändert wird, das Element erneut gerendert wird. Wenn wir jedoch keine Aktualisierung wünschen, können wir die v-einmal Direktive.

linuxhintText

Raw-HTML-Interpolation

Vue.js erlaubt keine Datenbindung von reinem Text, aber wir können rohen HTML-Text mit der v-html Direktive. Im folgenden Beispiel haben wir eine Variable in einer Komponente namens rawHTML das enthält etwas Roh-HTML-Text.

Daten()
Rückkehr
msg: "Hallo Vue",
rawHTML: "

Linuxhint ist Groß

Wir können die binden rawHTML variabel mit v-html Direktive wie folgt.

Das div tag wird a haben p tag drin.

Attribute-Interpolation

Bei der rohen HTML-Interpolation haben wir keine doppelten geschweiften Klammern verwendet, um die Variable zu binden. Wenn wir daher eine Variable innerhalb des HTML-Attributs binden möchten, können wir die v-bind Direktive.

Ausdrücke

Vue.js bietet nicht nur Funktionen zum Binden einer Variablen. Vue.js kann verwendet werden, um verschiedene Arten von Ausdrücken in doppelte geschweifte Klammern zu schreiben.

zählen + 1
prüfen ? "wahr falsch"
arr.Sortieren().umkehren()

Einpacken

In diesem Artikel haben wir Vue . vorgestellt.js' einfache, aber nützliche Vorlagensyntax. Es gibt jedoch noch viel mehr über Vue . zu erfahren.js. Sie können die offizielle Website von Vue . besuchen.js hier, und Sie können mit linuxhint weiter über JavaScript lernen.com.