Zusammenfassung des Wissens zum Vue V-Modell

​v-model ist eine Vue-Direktive, die eine bidirektionale Datenbindung zwischen Eingabe- und Formulardaten oder zwischen zwei Komponenten bereitstellt.

Dies ist ein einfaches Konzept in der Vue-Entwicklung, aber es dauert einige Zeit, die wahre Leistungsfähigkeit des V-Modells zu verstehen.

Am Ende dieses Tutorials verstehen Sie alle verschiedenen Anwendungsfälle für das V-Modell und wissen, wie Sie es in Ihren eigenen Projekten einsetzen können.

Sind Sie bereit?

Ich auch. Lassen Sie uns etwas Code schreiben.

Was ist ein V-Modell?

Wie wir gerade besprochen haben, ist v-model eine Direktive, die wir in unserem Vorlagencode verwenden können. Eine Direktive ist ein Vorlagentoken, das Vue mitteilt, wie wir mit dem DOM umgehen möchten.

v-model teilt Vue mit, dass wir eine bidirektionale Datenbindung zwischen dem Wert in der Vorlage und dem Wert in der Dateneigenschaft erstellen möchten.

Ein häufiger Anwendungsfall für die Verwendung des V-Modells ist das Entwerfen von Formularen und Eingaben. Wir können dies verwenden, um ein DOM-Eingabeelement zu aktivieren, um Daten in einer Vue-Instanz zu ändern.

Sehen wir uns ein einfaches Beispiel für die Verwendung des V-Modells bei einer Texteingabe an.

<Vorlage>
 <div>
  <Eingabe 
   Typ='Text'
   v-Modell = "Wert"
  />
  <p> Wert: {{ value }} </p>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Daten() {
  zurückkehren {
   Wert: „Hallo Welt“ 
  }
 }
}
</Skript>

Während wir unseren Text eingeben, sehen wir, wie sich unser Datenattribut ändert.

Was ist der Unterschied zwischen V-Model und V-Bind?

Die v-bind-Direktive wird häufig mit v-model vertauscht.

Der Unterschied zwischen beiden besteht darin, dass das V-Modell eine bidirektionale Datenbindung ermöglicht.

In unserem Fall bedeutet dies, dass sich unsere Eingaben ändern, wenn sich unsere Daten ändern, und dass sich unsere Daten ändern, wenn sich unsere Eingaben ändern.

Allerdings bindet v-bind Daten nur auf eine Art und Weise.

Dies ist nützlich, wenn Sie in Ihrer Anwendung einen klaren Einweg-Datenfluss erstellen möchten. Bei der Auswahl zwischen V-Model und V-Bind müssen Sie jedoch vorsichtig sein.

V-Modell-Modifikatoren

Vue bietet zwei Modifikatoren, mit denen wir die Funktionalität des V-Modells ändern können.

Die einzelnen Elemente können auf diese Weise addiert oder auch miteinander verbunden werden.

<Eingabe 
 Typ='Text'
 v-model.trim.lazy='Wert'
/>

.faul

Standardmäßig wird das V-Modell bei jedem Eingabeereignis mit dem Status der Vue-Instanz (der Dateneigenschaft) synchronisiert. Hierzu gehören das Erlangen und Verlieren der Konzentration usw.

Der Lazy-Modifikator ändert unser V-Modell, sodass es nur nach einem Änderungsereignis synchronisiert wird.

Dadurch wird die Anzahl der Synchronisierungsversuche des V-Modells mit der Vue-Instanz reduziert – und in einigen Fällen kann die Leistung verbessert werden.

.Nummer

Normalerweise wird unsere Eingabe automatisch in einen String umgewandelt – auch wenn wir eine Zahl eingeben.

Eine Möglichkeit, sicherzustellen, dass ein Wert als Zahl behandelt wird, ist die Verwendung des Modifikators .number.

Gemäß der Vue-Dokumentation wird der letzte gültige Wert der Eingabe zurückgegeben, wenn sich die Eingabe ändert und parseFloat() den neuen Wert nicht analysieren kann.

<Eingabe 
 Typ='Nummer'
 v-Modell.Nummer='Wert'
/>

.trimmen

Ähnlich wie die Trim-Methode in den meisten Programmiersprachen entfernt der Modifikator .trim führende oder nachfolgende Leerzeichen, bevor der Wert zurückgegeben wird.

Verwenden des V-Modells in benutzerdefinierten Komponenten

Ok, da wir nun die Grundlagen des V-Modells in Formularen/Eingaben kennen, schauen wir uns eine interessante Verwendung des V-Modells an – das Erstellen einer bidirektionalen Datenbindung zwischen Komponenten.

In Vue besteht die Datenbindung aus zwei Hauptschritten:

Übergeben von Daten vom übergeordneten Knoten

Senden Sie ein Ereignis von einer untergeordneten Komponente, um die übergeordnete Komponente zu aktualisieren

Die Verwendung des V-Modells auf einer benutzerdefinierten Komponente ermöglicht es uns, eine Stütze zu übergeben und ein Ereignis mit einer Direktive zu behandeln.

<custom-text-input v-model="Wert" />
IST DAS GLEICH WIE
<benutzerdefinierter-text-input 
  :modelValue="Wert"
  @update:modelValue="Wert = $Ereignis"
/>

Okay, was bedeutet das also?

Fahren wir mit dem V-Modell-Formularbeispiel fort und verwenden eine benutzerdefinierte Texteingabe namens CustomTextInput.vue.

Der Standardname für mit v-model übergebene Werte ist modelValue – diesen verwenden wir in unseren Beispielen.

Wir können jedoch einen benutzerdefinierten Modellnamen wie diesen übergeben.

<custom-text-input v-model:name="Wert" />

Hinweis: Wenn wir einen benutzerdefinierten Modellnamen verwenden, wird der Name der ausgegebenen Methode aktualisiert: Name

Hier ist ein Diagramm aus der Vue-Dokumentation, das es zusammenfasst.

Verwenden des V-Modells in benutzerdefinierten Komponenten

Wir haben die übergeordnete Komponente bereits eingerichtet, greifen wir also von der untergeordneten Komponente darauf zu.

In CustomTextInput.vue müssen wir zwei Dinge tun:

• Akzeptiert unseren V-Modell-Wert als Requisite
• Wenn sich unsere Eingabe ändert, lösen Sie ein Aktualisierungsereignis aus

Ok – deklarieren wir es zunächst als Requisite in unserem Skript.

Standard exportieren {
 Requisiten: {
  Modellwert: Zeichenfolge,
 }
}

Als Nächstes erstellen wir unsere Vorlage, legen den Wert für die Eigenschaft „modelValue“ fest und geben den neuen Wert immer dann über „update:modelValue“ aus, wenn ein Eingabeereignis auftritt.

<Vorlage>
 <div>
  <label> Vorname </label>
  <Eingabe 
   Typ='Text'
   Platzhalter='Eingabe'
   :Wert='Modellwert'
   @input='$emit("update:Modellwert", $event.Zielwert)'
  />
 </div>
</Vorlage>

Verwenden des V-Modells

In Ordnung!

Wir haben ein grundlegendes Beispiel für die Verwendung des V-Modells zum Binden von Daten zwischen zwei Komponenten behandelt.

Sehen wir uns einige fortgeschrittenere Möglichkeiten zur Verwendung der V-Model-Direktive an.

Mehrmaliges Verwenden des V-Modells für eine Komponente

Das V-Modell ist nicht auf die einmalige Verwendung pro Komponente beschränkt.

Um das V-Modell mehrfach zu verwenden, müssen wir nur sicherstellen, dass jede Stütze eindeutig benannt ist und in den untergeordneten Komponenten korrekt darauf zugegriffen wird.

Fügen wir lastName ein zweites V-Modell hinzu.

In unserer übergeordneten Komponente:

<Vorlage>
 <div>
  <benutzerdefinierter-text-input 
   v-Modell = "Wert" 
   v-model:lastName='Nachname'
  />
  <p> Wert: {{ value }} </p>
  <p> Nachname: {{ lastName }} </p>
 </div>
</Vorlage>

<Skript>
importiere CustomTextInput aus „./CustomTextInput.vue“

Standard exportieren {
 Komponenten:
  BenutzerdefinierterTextInput,
 },
 Daten() {
  zurückkehren {
   Wert: 'Matt',
   Nachname: 'Maribojoc'
  }
 }
}
</Skript>

Dann innerhalb der untergeordneten Komponente:

<Vorlage>
 <div>
  <label> Vorname </label>
  <Eingabe 
   Typ='Text'
   :Wert='Modellwert'
   Platzhalter='Eingabe'
   @input='$emit("update:Modellwert", $event.Zielwert)'
  />
  <label> Nachname </label>
  <Eingabe 
   Typ='Text'
   :Wert='Nachname'
   Platzhalter='Eingabe'
   @input='$emit("update:Nachname", $event.target.value)'
  />
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
  Nachname: String,
  Modellwert: Zeichenfolge,
 }
}
</Skript>

Benutzerdefinierte Modifikatoren für das V-Modell

Wie wir besprochen haben, sind in Vue einige Modifikatoren integriert. Aber eines Tages möchten wir unsere eigenen hinzufügen.

Angenommen, wir möchten einen Modifikator erstellen, um alle Leerzeichen aus der Eingabe zu entfernen. Wir nennen dies Nicht-Raum.

<benutzerdefinierter-text-input 
 v-model.no-whitespace='Wert' 
 v-model:lastName='Nachname'
/>

In unserer Eingabekomponente können wir eine Stütze verwenden, um die Modifikatoren zu erfassen. Der Name des benutzerdefinierten Modifikators ist nameModifiers.

Requisiten: {
 Nachname: String,
 Modellwert: Zeichenfolge,
 Modellmodifikatoren: {
  Standard: () => ({})
 }
}

Ok, als Erstes müssen wir den @input-Handler ändern, um eine benutzerdefinierte Methode zu verwenden. Wir können es emitValue nennen und es akzeptiert den Namen der bearbeiteten Eigenschaft und des Ereignisobjekts.

<label> Vorname </label>
<Eingabe 
   Typ='Text'
   :Wert='Modellwert'
   Platzhalter='Eingabe'
   @input='emitValue("Modellwert", $Ereignis)'
/>

In der Methode emitValue überprüfen wir die Modifikatoren, bevor wir $emit aufrufen. Wenn der Modifikator „no-whitespace“ wahr ist, kann der Wert geändert werden, bevor er an das übergeordnete Element gesendet wird.

emittierenWert(Eigenschaftsname, evt) {
 let val = evt.ziel.wert
 wenn (this.modelModifiers['no-whitespace']) {
  val = val.replace(/\s/g, '')
 }
 dies.$emit(`update:${propName}`, val)
}

abschließend

Hoffentlich haben Sie etwas Neues über das V-Modell gelernt.

In seinen grundlegenden Anwendungsfällen wie Formularen und Dateneingabe ist das V-Modell ein sehr einfaches Konzept. Wir können jedoch wirklich mehr über das V-Modell lernen, wenn wir anfangen, benutzerdefinierte Komponenten zu erstellen und komplexere Daten zu verarbeiten.

Oben finden Sie den detaillierten Inhalt der Zusammenfassung des Wissens zu Vue ​v-model. Weitere Informationen zu Vue ​v-model finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!