Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Inhaltsverzeichnis

1. Was ist bidirektionale Datenbindung?

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

2. Verwenden Sie die bidirektionale Datenbindung in Formularen

1. Einzeiliger Text
2. Mehrzeiliger Text
3. Einzelnes Kontrollkästchen
4. Mehrere Kontrollkästchen
5. Optionsfelder
6. Dropdown-Feld

3. Was ist eine Komponente?

1. Die erste Vue-Komponente
2. Verwenden Sie Props-Attribute, um Parameter zu übergeben

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)

Detaillierte Erläuterung der Vue-Formularbindung und -Komponenten

Inhaltsverzeichnis

1. Was ist bidirektionale Datenbindung?

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

2. Verwenden Sie die bidirektionale Datenbindung in Formularen

1. Einzeiliger Text

2. Mehrzeiliger Text

3. Einzelnes Kontrollkästchen

4. Mehrere Kontrollkästchen

5. Optionsfelder

6. Dropdown-Feld

3. Was ist eine Komponente?

1. Die erste Vue-Komponente

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

Einführung in semantische XHTML-Tags

So installieren Sie den Chrome-Browser auf CentOS 7

Karusselleffekte mit JavaScript implementieren

MySQL 4-Methoden zum Importieren von Daten

Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

So installieren Sie MySQL Community Server 5.6.39

CSS - overflow:hidden in Projektbeispielen

Lösung für falsche Zeichenfolgenwerte in MySQL

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Vergleichen von Dokumentspeicherorten

Artikel empfehlen

Natives JS zum Erstellen eines verschiebbaren Anmeldefelds

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

Einige Hinweise zu MySQL-Routineberechtigungen

HTML-Auswahloption So treffen Sie die Standardauswahl

Detaillierte Erklärung redundanter und doppelter Indizes in MySQL

Erläuterung der MySQL-Indexoptimierung

Detaillierte Erklärung der Vue-Komponenten

So erstellen Sie einen NFS-Dienst in Ubuntu 16.04

Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.

Weitere beliebte und kreative Beispiele für Webdesign mit dunklem Hintergrund

So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit

28 berühmte Beispiele für Blog-Redesigns

So verwenden Sie DCL zum Verwalten von Benutzern und Steuern von Berechtigungen in MySQL

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

So verwenden Sie den JS-Code-Compiler Monaco