Vue.js-Datenbindung

Vue.js ist eine so einfach zu erlernende und zugängliche Bibliothek. Mit den Kenntnissen von HTML, CSS und Javascript können wir also mit der Erstellung von Webanwendungen in Vue . beginnen.js. Vue.js wird erstellt, indem die besten Funktionen aus einem bereits vorhandenen Angular- und Reaction-Framework kombiniert werden.

Datenbindung ist eine der elegantesten Funktionen von Vue.js, weil es eine reaktive/bidirektionale Datenbindung bietet. In Vue.js müssen wir nicht viele Zeilen schreiben, um eine bidirektionale Datenbindung zu haben, im Gegensatz zu anderen Frameworks. Einseitige Datenbindung bedeutet, dass die Variable nur an das DOM gebunden ist. Andererseits bedeutet bidirektional, dass die Variable auch vom DOM gebunden ist. Wenn DOM geändert wird, wird auch die Variable geändert. Werfen wir also einen Blick auf die beiden Datenbindungen und sehen wir den richtigen Unterschied.

Datenbindung in eine Richtung

Wenn wir eine Variable binden möchten, können wir einfach Vue . verwenden.js-Syntax mit doppelten geschweiften Klammern oder „Mustache“-Syntax, um eine beliebige Variable aus der relativen Komponenteninstanz zu binden.

linuxhintText

Oder, wenn wir eine beliebige Variable innerhalb eines HTML-Attributs binden möchten, können wir die v-bind Direktive.

Vue.js bietet auch die Abkürzung für das Binden von Variablen in einem HTML-Attribut. Anstatt zu schreiben v-bind:Attributname, wir können nur einen Doppelpunkt „:“ und den Attributnamen verwenden.

Aber das sind nur Datenbindungen. Um die bidirektionale Datenbindung zu demonstrieren, können wir die V-Modell Direktive des Vue.js.

Bidirektionale/reaktive Datenbindung

Um die reaktive Datenbindung zu demonstrieren, können wir die V-Modell Direktive in einem Eingabeformularfeld. Es wird intern ein Ereignis ausgeben und die Variable ändern. An die wir an anderer Stelle in der Vorlage mit doppelten geschweiften Klammern oder der Syntax „Mustache“ binden können.

Du tippst: linuxhintText

Immer wenn wir nun ein Zeichen in das Eingabeformularfeld eingeben, können wir sehen, dass die Variable auch gleichzeitig aktualisiert wird.

Einpacken

In diesem Artikel haben wir gelernt, wie man Variablen in Vue bindet.js mit doppelten geschweiften Klammern oder der Syntax „Mustache“. Wir haben auch die bidirektionale/reaktive Datenbindung in Vue demonstriert.js mit der v-model-Direktive. Nach dem Lesen dieses Artikels ist die Datenbindung für einen Anfänger, der gerade erst mit Vue begonnen hat, keine schwierige Aufgabe mehr.js. Lernen Sie also weiterhin die Konzepte von Vue.js mit linuxhint.com. Vielen Dank!