Vue.JS -Datenbindung

Vue.JS ist eine so leicht zu erlernen und zugängliche Bibliothek. Mit dem Wissen von HTML, CSS und JavaScript können wir also mit dem Erstellen von Webanwendungen in Vue beginnen.JS. Vue.JS wird gebaut, indem die besten Funktionen aus einem bereits vorhandenen Winkel- und React -Framework kombiniert werden.

Die Datenbindung ist eines der elegantesten Merkmale von VUE.JS, da es reaktive/Zwei-Wege-Datenbindung liefert. In Vue.JS, wir müssen nicht viele Zeilen schreiben, um eine Zwei-Wege-Datenbindung zu haben, im Gegensatz zu anderen Frameworks. Einweg-Datenbindung bedeutet, dass die Variable nur an die DOM gebunden ist. Auf der anderen Seite bedeutet Zweiweg, dass die Variable auch vom DOM gebunden ist. Wenn DOM geändert wird, wird auch die Variable geändert. Schauen wir uns also beide Datenbindungen an und sehen uns den richtigen Unterschied an.

Einweg-Datenbindung

Wenn wir eine Variable binden wollen, können wir Vue einfach verwenden.Die doppelte Curly -Braces -Syntax der JS oder die Syntax „Schnurrbart“, um eine Variable an der relativen Komponenteninstanz zu binden.

LinuxHintText

Oder wenn wir eine Variable innerhalb eines HTML -Attributs binden möchten, können wir die verwenden V-Bind Richtlinie.

Vue.JS liefert auch die Abkürzung für Bindungsvariablen in einem HTML -Attribut. Anstatt zu schreiben V-BIND: Attributname, Wir können nur einen Dickdarm „:“ und Attributname verwenden.

Dies sind jedoch nur Datenbindungen. Um die Zwei-Wege-Datenbindung zu demonstrieren, können wir die verwenden V-Model Richtlinie vom Vue zur Verfügung gestellt.JS.

Zwei-Wege-/Reaktivdatenbindung

Um die reaktive Datenbindung zu demonstrieren, können wir die verwenden V-Model Richtlinie auf einem Eingangsformfeld. Es wird intern ein Ereignis ausgeben und die Variable ändern. An die wir mit doppelten lockigen Klammern oder "Schnurrbart" -Syntax woanders in der Vorlage binden können.

Sie tippen: LinuxHintText

Wenn wir nun ein Zeichen in das Feld "Eingabebildform" eingeben, können wir sehen, dass die Variable auch gleichzeitig aktualisiert wird.

Einpacken

In diesem Artikel haben wir gelernt, wie man Variablen binden.JS verwenden doppelte lockige Klammern oder "Schnurrbart" -Syntax. Wir haben auch die Bindung der zwei Wege/reaktiven Daten in VUE demonstriert.JS Verwenden der V-Model-Richtlinie. Nach dem Lesen dieses Artikels ist die Datenbindung für einen Anfänger, der gerade einen Start mit Vue hat, keine schwierige Aufgabe mehr.JS. Lernen Sie also weiter die Konzepte von Vue.JS mit LinuxHint.com. Danke!