Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

1. Was ist bidirektionale Datenbindung?

Vue.js ist ein MV-VM-Framework, was bidirektionale Datenbindung bedeutet. Wenn sich die Daten ändern, ändert sich auch die Ansicht, und wenn sich die Ansicht ändert, ändern sich auch die Daten synchron. Dies ist die Essenz von Vue.js.
Es ist zu beachten, dass die sogenannte bidirektionale Datenbindung für UI-Steuerelemente erfolgen muss. Bei Nicht-UI-Steuerelementen ist keine bidirektionale Datenbindung erforderlich. Die unidirektionale Datenbindung ist Voraussetzung für die Verwendung von Statusverwaltungstools. Wenn wir vue x verwenden, ist der Datenfluss ebenfalls unidirektional, was zu Konflikten mit der bidirektionalen Datenbindung führt.

1. Warum müssen wir eine bidirektionale Datenbindung implementieren?

Wenn Sie in Vue.js vuex verwenden, sind die Daten tatsächlich unidirektional. Der Grund, warum es bidirektionale Datenbindung genannt wird, liegt darin, dass es UI-Steuerelemente verwendet. Für uns ist die bidirektionale Datenbindung von Vue.js zur Verarbeitung von Formularen besonders komfortabel zu verwenden. Das heißt, die beiden schließen sich nicht gegenseitig aus. Die Verwendung der unidirektionalen Methode im globalen Datenfluss ist für die Nachverfolgung praktisch; die Verwendung der bidirektionalen Methode im lokalen Datenfluss ist einfach und leicht zu handhaben.

2. Verwenden Sie die bidirektionale Datenbindung in Formularen

Mit der V-Model-Direktive können Sie eine bidirektionale Datenbindung für Formulare und Elemente erstellen. Es wählt automatisch die richtige Methode zum Aktualisieren des Elements basierend auf dem Steuerelementtyp aus. Trotz seiner Magie ist das V-Modell im Wesentlichen nur syntaktischer Zucker. Es ist dafür verantwortlich, auf Benutzereingaben zu warten, um Daten zu aktualisieren und in einigen Extremszenarien spezielle Verarbeitungsvorgänge durchzuführen.
Hinweis: v-model ignoriert die Anfangswerte der Attribute „value“, „checked“ und „selected“ aller Formularelemente und verwendet immer die Daten der Vue-Instanz als Datenquelle. Initialwerte sollten Sie in der Datenoption der Komponente per JavaScript deklarieren!

1. Einzeiliger Text

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>
<div id="app">
  Eingabetext: <input type="text" v-model="message" value="hello">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      Nachricht:""
    }
  });
</Skript>
</body>
</html>

2. Mehrzeiliger Text

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>
<div id="app">
  Mehrzeiliger Text: <textarea v-model="pan"></textarea>&nbsp;&nbsp;Mehrzeiliger Text ist: {{pan}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      pan:"Hallo hallo!"
    }
  });
</Skript>
</body>
</html>

3. Einzelnes Kontrollkästchen

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>

<div id="app">
  Einzelnes Kontrollkästchen:
  <input type="checkbox" id="checkbox" v-model="aktiviert">
  &nbsp;&nbsp;
  <label für="checkbox">{{aktiviert}}</label>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      aktiviert:false
    }
  });
</Skript>
</body>
</html>

4. Mehrere Kontrollkästchen

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>

<div id="app">
  Mehrere Kontrollkästchen:
  <Eingabetyp="Kontrollkästchen" ID="Jack" Wert="Jack" v-Modell="checkedNames">
  &nbsp;&nbsp;
  <label für="jack">Jack</label>
  <input type="checkbox" id="beitreten" value="Beitreten" v-model="checkedNames">
  &nbsp;&nbsp;
  <label für="join">Jack</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  &nbsp;&nbsp;
  <label für="mike">Mike</label>
  <span>Überprüfter Wert: {{checkedNames}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      geprüfte Namen:[]
    }
  });
</Skript>
</body>
</html>

5. Optionsfelder

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>

<div id="app">
  Optionsfeld <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">Eins</label>
  <input type="radio" id="zwei" value="Zwei" v-model="ausgewählt">
  <label for="two">Zwei</label>
  <span>Ausgewählter Wert: {{picked}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      ausgewählt: 'Zwei'
    }
  });
</Skript>
</body>
</html>

6. Dropdown-Feld

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>
<div id="app">

  Dropdown-Feld:
  <v-Modell auswählen="pan">
    <option value="" deaktiviert>---Bitte wählen---</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </Auswählen>
  <span>Wert:{{pan}}</span>



</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  var vm = neuer Vue({
    el:"#app",
    Daten:{
      Schwenken: „A“
    }
  });
</Skript>
</body>
</html>

Hinweis: Der Anfangswert des V-Modell-Ausdrucks stimmt mit keiner Option überein und das Element wird als „nicht ausgewählt“ gerendert. Unter iOS verhindert dies, dass der Benutzer die erste Option auswählt, da iOS in diesem Fall das Änderungsereignis nicht auslöst. Daher wird eher empfohlen, eine deaktivierte Option mit einem leeren Wert bereitzustellen, wie oben gezeigt.

3. Was ist eine Komponente?

  • Komponenten sind wiederverwendbare Vue-Instanzen, die im Grunde genommen eine Reihe wiederverwendbarer Vorlagen sind. Sie ähneln den benutzerdefinierten Tags von JSTL, Thymeleals th:fragment und anderen Frameworks. Normalerweise ist eine Anwendung als verschachtelter Komponentenbaum organisiert:

  • Sie könnten beispielsweise Komponenten wie eine Kopfzeile, eine Seitenleiste und einen Inhaltsbereich haben, die jeweils andere Komponenten wie Navigationslinks, Blogbeiträge usw. enthalten.

1. Die erste Vue-Komponente

Hinweis: Bei der tatsächlichen Entwicklung werden wir Komponenten nicht auf die folgende Weise entwickeln, sondern vue-cli verwenden, um mithilfe von Vue-Vorlagendateien zu erstellen und zu entwickeln. Die folgende Methode soll Ihnen nur dabei helfen, zu verstehen, was Komponenten sind.
Verwenden Sie die Methode Vue.component(), um Komponenten im folgenden Format zu registrieren:

<div id="app">
 <schwenken></schwenken>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skripttyp="text/javascript">
  //Registriere zuerst die Komponente Vue.component("pan",{
    
    Vorlage:'<li>Hallo</li>'

  });
  //Vue erneut instanziieren
  var vm = neuer Vue({
    el:"#app",
  });
</Skript>

veranschaulichen:

  • Vue.component(): Komponenten registrieren
  • pan: Benutzerdefinierter Komponentenname
  • Vorlage: Komponentenvorlage

2. Verwenden Sie Props-Attribute, um Parameter zu übergeben

Es macht keinen Sinn, Komponenten wie oben zu verwenden, also müssen wir Parameter an Komponenten übergeben, und hier müssen wir das Props-Attribut verwenden!
Hinweis: Gemäß den Standardregeln darf der Wert im Props-Attribut nicht in Großbuchstaben geschrieben werden.

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>

</Kopf>
<Text>

<div id="app">
  <!--Komponente, an die Komponente übergebener Wert: props-->
  <cpn v-for="Artikel in Artikeln" v-bind:itemChild="Artikel"/>
</div>


<!--1. Importieren Sie vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
  // Definieren Sie eine Vue-Komponente component Vue.component("cpn",{
    Requisiten: ['itemChild'],
    Vorlage: `<li>{{itemChild}}</li>`
  })
  var vm = neuer Vue({
    el: '#app',
    Daten: {
      Elemente: ['One Piece', 'Naruto', 'Sword Art Online']
    }
  });
</Skript>
</body>
</html>

veranschaulichen:

  • v-for="item in items": durchläuft das in der Vue-Instanz definierte Array mit dem Namen items und erstellt eine gleiche Anzahl von Komponenten
  • v-bind:itemChild="item": Binden Sie das durchlaufene Element an die Eigenschaft mit dem Namen „item“, die in den Eigenschaften in der Komponente definiert ist. Das „itemChild“ auf der linken Seite des „=“-Zeichens ist der in den Eigenschaften definierte Eigenschaftsname und das auf der rechten Seite ist der Wert des durchlaufenen Elements in „item“ in „items“.

Oben finden Sie eine ausführliche Erläuterung der Vue-Formularbindung und -Komponenten. Weitere Informationen zur Vue-Formularbindung und -Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Praktisches Beispiel zum dynamischen Hinzufügen von Komponenten in einem Vue-Formular
  • Vue-Loop-Komponente plus Validierungsbeispiel für mehrere Formulare
  • Detaillierte Erläuterung der Datenbindung von Vue-Formularereignissen
  • Vue-Formulareingabebindung V-Modell
  • Kennen Sie die doppelte Bindung von Formularen und Komponenten von Vue?

<<:  Tutorial zur Installation von MySQL 5.7.18 auf Mac OS 10.12

>>:  Nginx-Installation und Umgebungskonfiguration unter Windows (Ausführen von Nginx als Dienst)

Artikel empfehlen

Linux-Plattform MySQL ermöglicht Remote-Login

Während des Entwicklungsprozesses stoße ich häufi...

Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung

Prinzip der MySQL-Paging-Analyse und Effizienzver...

Galeriefunktion durch natives Js implementiert

Inhaltsverzeichnis Der erste Der Zweite Native Js...

Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies

Bei jedem Besuch wird im Browser Cookie generiert...

Detaillierte Erläuterung des Ansichtsbeispiels zur MySQL-Ansichtsverwaltung [Hinzufügen-, Löschen-, Ändern- und Abfragevorgänge]

Dieser Artikel beschreibt anhand eines Beispiels ...

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Inhaltsverzeichnis Überblick Vorsichtsmaßnahmen 1...

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen

1. Die Farbe der Bildlaufleiste unter xhtml Im Ori...

Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Inhaltsverzeichnis 1. Umsetzung 2. Probleme 3. Üb...

Scrollen Sie in Vue nach unten, um weitere Daten zu laden. Detaillierte Erläuterung des Scroll-Falls

Vue-unendliches Scrollen Installieren npm install...

12 Arten der Komponentenkommunikation in Vue2

Inhaltsverzeichnis 1. Requisiten 2..synchronisier...

Detaillierte Erklärung der NodeJS-Modularität

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

Lösung für Fehler 1290 beim Importieren von Dateidaten in MySQL

Fehlerszenario Verwenden Sie den MySQL-Befehl in ...

So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10

Vorwort Da viele Freunde sagen, dass sie keinen M...

Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

1. Einführung in mysqlbackup mysqlbackup ist die ...