Hier erfahren Sie, was Sie über die Datenbindung in Vue wissen müssen

Durch das Binden von Daten in Web-Apps wird eine Verbindung zwischen der App-Instanz und der UI (Benutzeroberfläche) hergestellt. Die Instanz der App verwaltet Daten, Verhalten und Komponenten, während die Benutzeroberfläche den visuellen Aspekt darstellt, mit dem Benutzer interagieren. Durch die Bindung von Daten können Sie dynamische Web-Apps erstellen.

Hier erkunden Sie verschiedene Bindungen in Vue, darunter Einweg- und Zwei-Wege-Bindungen. Außerdem erfahren Sie, wie Sie diese Bindungen mit Moustache-Vorlagen und -Anweisungen wie v-bind und v-model implementieren.

Interpolation in Vue

Interpolation ist eine der beliebtesten Arten der Datenbindung in Vue. Mit der Interpolation können Sie Datenwerte in Ihren HTML-Tags (Hyper Text Markup Language) mit der Moustache-Vorlage anzeigen, die im Volksmund mit doppelten geschweiften Klammern ({{ }}).

Mit der Mustache-Vorlage können Sie dynamische App-Inhalte wie Daten und Methodeneigenschaften in Ihr HTML integrieren. Sie können dies erreichen, indem Sie Daten- oder Methodeneigenschaftsnamen aus dem einschließen

Optionsobjekt in Vue innerhalb dieser geschweiften Klammern.

Hier ist ein Beispiel einer Vue-App, die die Moustache-Vorlage verwendet, um eine Interpolation in Vue zu erreichen:

<Körper>
<divAusweis=„App“>
<h1>{{ Titel }}h1>
<P>{{ text.toUpperCase() }}P>
div>
<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Titel: „Willkommen“,
 Text: „Das ist deine Welt?“,
 };
 },
 });
 app.mount("#app");
Skript>
Körper>

Der obige Codeblock verwendet die Mustache-Vorlage, um den Wert der Titeleigenschaft im Datenobjekt der Vue-App anzuzeigen. Sie können JavaScript-Ausdrucksergebnisse auch mit Interpolation anzeigen. Zum Beispiel die {{text.toUpperCase()}} Ausdruck in der P Tag zeigt die Großbuchstabenversion des Textwerts an, wie im Bild unten gezeigt:

Wenn Sie eine Vue-App bereitstellen, wertet Vue Ausdrücke in den Vorlagen aus und rendert die resultierenden Werte im HTML-Text. Alle Änderungen an Dateneigenschaften aktualisieren die entsprechenden Werte in der Benutzeroberfläche.

Zum Beispiel:

<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Titel: „Hallo“,
 Text: „Das ist deine Welt?“,
 };
 },
 });
 app.mount("#app");
Skript>

Der obige Codeblock ändert die Titeleigenschaft in „Hallo". Diese Änderung wird automatisch in der Benutzeroberfläche widergespiegelt, da die Vue-App die Titeleigenschaft an das UI-Element bindet, wie unten gezeigt:

Die Interpolation gibt nur Daten aus, wenn sich die doppelten geschweiften Klammern zwischen öffnenden und schließenden HTML-Tags befinden.

Einweg-Datenbindung mit der v-bind-Direktive

Wie bei der Interpolation verknüpft die unidirektionale Datenbindung die Instanz der App mit der Benutzeroberfläche. Der Unterschied besteht darin, dass Eigenschaften wie Daten und Methoden an HTML-Attribute gebunden werden.

Die unidirektionale Datenbindung unterstützt den unidirektionalen Datenfluss und verhindert, dass Benutzer Änderungen vornehmen, die sich auf Dateneigenschaften in der App-Instanz auswirken. Dies ist nützlich, wenn Sie dem App-Benutzer Daten anzeigen möchten, den Benutzer jedoch daran hindern möchten, sie zu ändern.

Mit dem können Sie in Vue eine unidirektionale Datenbindung erreichen v-bind Direktive oder ihr abgekürzter Charakter (:):

 die v-bind-Direktive 
<EingangTyp="Text"v-bind: Wert="Text">
 das: Kurzschriftzeichen 
<EingangTyp="Text":Wert="Text">

Der Codeblock zeigt die Verwendung der v-bind-Direktive und ihrer Abkürzung, um den Wert des Eingabe-HTML-Tags an eine Textdateneigenschaft zu binden. Hier ist ein Beispiel einer Vue-App, die das verwendet v-bind Direktive zum Erreichen einer unidirektionalen Datenbindung:

<Körper>
<divAusweis=„App“>
<EingangTyp="Text"v-bind: Wert="Text">
<P>{{ Text }}P>
div>
<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Text: „Vue ist großartig!“
 }
 }
 })
 app.mount('#app')
Skript>
Körper>

Oben zeigen ein Eingabefeld und ein Absatzelement den Wert des an Text Eigentum. Der Wert Das Attribut des Eingabefelds wird mithilfe von an die Texteigenschaft gebunden v-bind Richtlinie.

Dieser Codeblock erstellt eine unidirektionale Bindung, bei der Änderungen vorgenommen werden Text Die Eigenschaft aktualisiert den Wert des Eingabefelds, aber im Eingabefeld vorgenommene Änderungen aktualisieren den Wert nicht Text Eigenschaft in der Instanz der Vue-App.

Um dies zu zeigen, können wir mit dem Anfangswert von beginnen Text Eigentum, "Vue ist großartig!“:

Nachdem Sie den Wert des Eingabefelds auf „Hallo Welt!"Beachten Sie, dass die Vue-App nicht aktualisiert wurde und der Text im Absatz-Tag gleich geblieben ist:

Wenn wir jedoch den Wert ändern Text Eigentum zu Hallo Welt! In der Vue-App-Instanz wird das Eingabefeld nicht über das Eingabefeld aktualisiert, um den neuen Wert widerzuspiegeln:

Diese Art der Datenbindung ist praktisch in Szenarien, in denen Sie dem Benutzer Daten anzeigen möchten, den Benutzer jedoch daran hindern möchten, sie direkt zu ändern. Durch die Nutzung von v-bind in Vue.js können Sie eine unidirektionale Bindung einrichten und so die Daten Ihrer App einfach mit UI-Elementen verbinden.

Zwei-Wege-Datenbindung mit der V-Modell-Direktive

Durch die bidirektionale Datenbindung können Änderungen am Wert eines UI-Elements automatisch im zugrunde liegenden Datenmodell widergespiegelt werden und umgekehrt. Die meisten Frontend JavaScript-Frameworks wie Angular nutzt die Zwei-Wege-Bindung um Daten auszutauschen und Echtzeitereignisse zu verarbeiten.

Vue.js ermöglicht eine bidirektionale Bindung mit dem V-Modell Richtlinie. Der V-Modell Die Direktive erstellt eine bidirektionale Datenbindung zwischen einem Formulareingabeelement und einer Dateneigenschaft. Wenn Sie in ein Eingabeelement eingeben, wird der Wert automatisch in der Dateneigenschaft aktualisiert, und alle Änderungen an der Dateneigenschaft aktualisieren auch das Eingabeelement.

Hier ist ein Beispiel einer Vue-App, die das verwendet V-Modell Direktive zum Erreichen einer bidirektionalen Datenbindung:

<Kopf>
<Titel>Zwei-Wege-Datenbindung in VueTitel>
<Skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis=„App“>
<EingangTyp="Text"V-Modell="Text">
<P>{{ Text }}P>
div>
<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Text: „Vue ist großartig!“
 }
 }
 })
 app.mount('#app')
Skript>
Körper>

Der obige Codeblock hat ein Eingabeelement mit dem V-Modell Richtlinie, die es an die bindet Text Dateneigenschaft. Der Text Die Eigenschaft ist zunächst auf festgelegt „Vue ist großartig!“.

Das Eingabefeld aktualisiert die Texteigenschaft, wenn Sie etwas eingeben, und spiegelt Änderungen an der Texteigenschaft im wider P Schild. Vue.js verwendet die V-Model-Direktive und das Eingabeelement, um eine bidirektionale Datenbindung zu erreichen.

Während v-bind eine unidirektionale Kommunikation von der Vue-App zur Benutzeroberfläche ermöglicht, bietet v-model eine bidirektionale Kommunikation zwischen der Vue-App und der Benutzeroberfläche. Aufgrund seiner Fähigkeit, bidirektionale Kommunikation zu ermöglichen, V-Modell wird häufig bei der Arbeit mit Formularelementen in Vue verwendet.

Erweitern Sie Ihr Fachwissen im Erstellen von Vue-Apps

Sie haben etwas über die Datenbindung in Vue gelernt, einschließlich Interpolation und die Anweisungen v-bind und v-model. Diese Datenbindungen sind unerlässlich, da sie als Grundlage für Vue-Apps dienen.

Vue verfügt über viele weitere Anweisungen für Anwendungsfälle, wie z. B. Listenrendering, Ereignisbindung und bedingtes Rendering. Wenn Sie die Vue-Anweisungen verstehen, können Sie ein dynamisches und interaktives Frontend für Ihre Webanwendungen erstellen.