Vue Grundanleitung Beispiel grafische Erklärung

Inhaltsverzeichnis

1. v-on-Richtlinie

1. Grundlegende Verwendung
2. Syntaktischer Zucker
3. Ereignisparameter
4. Ereignismodifikatoren

2. v-if-Richtlinie

3. v-show-Befehl

4. v-for-Richtlinie

1. Durchlaufen eines Arrays
2. Objekte durchqueren
3. Schlüsselattribute der Komponente
4. Welche Methoden im Array reagieren?

5. V-Modell-Richtlinie

1. Grundlegende Verwendung des V-Modells
2. Das Prinzip des V-Modells
2. Einsatz des V-Modells im Radio
3. Verwendung des V-Modells in der Checkbox
4. Verwendung des V-Modells in ausgewählten
6. V-Modell-Modifikatoren

Vue (ausgesprochen /vjuː/, ähnlich wie „view“) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Dies erleichtert nicht nur den Einstieg, sondern lässt sich auch problemlos in Bibliotheken von Drittanbietern oder vorhandene Projekte integrieren. Andererseits ist Vue in Kombination mit einer modernen Toolchain und verschiedenen unterstützenden Bibliotheken durchaus in der Lage, komplexe Single-Page-Anwendungen auszuführen.

1. v-on-Richtlinie

1. Grundlegende Verwendung

v-on ist ein Befehl zur Ereignisüberwachung. Sehen wir uns seine einfache Verwendung an.

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <h2>{{counter}}</h2>
 <button v-on:click="Hinzufügen"> + </button>
 <button v-on:click="sub"> - </button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Zähler: 0
  },
  Methoden: {
   hinzufügen() {
    dieser.Zähler++
   },
   unter() {
    dieser.Zähler --
   }
  }
 });
</Skript>
</body>
</html>

Wir binden das Klickereignis an die Schaltfläche. v-on:click = "add"

v-on: füge am Ende den Zeitnamen hinzu
Sie müssen den Ereignisnamen des Bindungsereignisses angeben

Schauen wir uns den Laufeffekt an

2. Syntaktischer Zucker

Wir wissen, dass die Direktive v-bind wie folgt abgekürzt werden kann: und v-on auch wie @. Das Obige kann wie folgt abgekürzt werden:

<button @click="Hinzufügen"> + </button>
<button @click="sub"> - </button>

3. Ereignisparameter

Keine Parametermethode

Die obigen Fälle sind alle ohne Parameter. Wenn die Methode keine Parameter hat, können wir die Klammern beim Aufruf weglassen

Die Add-Methode akzeptiert keine Parameter und kann auf zwei Arten aufgerufen werden:

Kopieren Sie den Code wie folgt:
 <button @click="add"> + </button> oder <button @click="add()"> + </button>

Beide Schreibweisen sind zulässig.

Methode mit Parametern

Wenn eine Methode Parameter hat, gilt der folgende Fall

<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Zahl1: 10,
   Zahl2: 100
  },
  Methoden: {
   drucken(Nachricht) {
    console.log("drucken" + Nachricht)
   }
  }
 });
</Skript>

Aufrufmethode 1: Beim Aufruf stehen keine Parameter in der Klammer.

<div id="app">
 <button @click="print()"> Drucken</button>
</div>

Dies liegt daran, dass der an die Methode übergebene Parameter nicht definiert ist.

Aufrufmethode 2: ohne Klammern

<div id="app">
 <button @click="print"> Drucken</button>
</div>

Der Unterschied zur Methode 1 besteht darin, dass die Klammern zum Methodenaufruf weggelassen werden.

Was wird dann die Wirkung sein?

Wie Sie sehen, ist es zu diesem Zeitpunkt nicht undefiniert, sondern ein MouseEvent-Mausereignis.

Warum? Tatsächlich generiert die Seite automatisch ein Ereignis, wenn mit der Maus auf die Schaltfläche geklickt wird. Wenn keine Parameter übergeben werden, wird das Ereignis automatisch als Parameter übergeben. Wenn Sie dieses Ereignis aufrufen müssen, können Sie den Methodenparameter eingeben, um den Ereignisparameter explizit zu erhalten.

Aufrufmethode 3: Die Parameter enthalten sowohl normale Parameter als auch Ereignisparameter

In diesem Fall müssen wir $event verwenden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <button @click="drucken"> button1 </button>
 <button @click="drucken1('aaa')"> button2 </button>
 <button @click="drucken1('aaa', $event)"> button3 </button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Zahl1: 10,
   Zahl2: 100
  },
  Methoden: {
   drucken(Nachricht) {
    console.log("drucken" + Nachricht)
   },
   print1(Nachricht, Ereignis){
    console.log("drucken" + Ereignis + ", Nachricht:" + Nachricht)
   },
   print2(Nachricht, Ereignis) {
    console.log("Ereignis:" + Ereignis + ", Nachricht:" + Nachricht)
   }
  }
 });
</Skript>
</body>
</html>

Dann schauen Sie sich die Wirkung an

Es werden sowohl Nachrichten als auch Ereignisse weitergegeben.

4. Ereignismodifikatoren

stop: Rufen Sie event.stopPropagation() auf, um das Bubbling-Ereignis zu stoppen

Schauen Sie sich den folgenden Code an

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app" @click="divClick">
 <button @click="btnClick">Schaltfläche</button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo"
  },
  Methoden:{
   divKlick(){
    console.log("divClick")
   },
   btnClick(){
    console.log("btnClick")
   }
  }
 });
</Skript>
</body>
</html>

Es gibt ein BTN im Div, das Div hat ein Klickereignis und das BTN hat auch ein Klickereignis. Wenn wir auf das BTN klicken, werden dann die beiden Methoden zurückgerufen? Sehen wir uns die Auswirkungen an

Die click()-Methode von btn wird tatsächlich aufgerufen, und die click()-Methode von div wird ebenfalls aufgerufen. Dies ist der Event-Bubbling-Mechanismus, und normalerweise möchten wir eine solche Situation auf der Seite vermeiden. Daher werden wir eine Methode schreiben, um Event-Bubbling zu verhindern.

In Vue kann dieses Problem jedoch durch die Verwendung des Stoppmodifikators gelöst werden. Fügen Sie den Stoppmodifikator zum Klickereignis der BTN-Schaltfläche hinzu

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Schaltfläche</button>
</div>

Dadurch wird ein Aufsteigen der Veranstaltung verhindert.

verhindern: Rufen Sie event.preventDefault() auf, um das Standardereignis zu verhindern

Wir definieren nun eine Methode in Methoden

stopDefaultEventBtn(){
 console.log("stopDefaultEventBtn")
}

Beim Aufruf definieren wir einen Button zum Absenden des Formulars. Wir wissen, dass das Formular eine eigene Preiserhöhungszeit hat. Durch Klicken auf den Button wird zur im Formular angegebenen Aktionsadresse gesprungen.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Bubbling-Ereignis stoppen</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" value="Standardereignis verhindern"></input>
 </form>
</div>

Jetzt möchten wir das automatische Übermittlungsereignis „Submit“ nicht verwenden, sondern stoppen und unser benutzerdefiniertes „stopDefaultEventBtn“-Ereignis verwenden.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Bubbling-Ereignis stoppen</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent="stopDefaultEventBtn" value="Standardereignis verhindern"></input>
 </form>
 <!-- „Submit“ verfügt über einen eigenen Übermittlungsereignismodus, wir möchten jedoch normalerweise nicht die Standardübermittlungszeit verwenden, sondern mein benutzerdefiniertes Ereignis. -->
</div>

Wenn wir die Methode zu diesem Zeitpunkt aufrufen, stellen wir fest, dass sie nicht automatisch zum durch die Aktion angegebenen Ereignis springt, sondern das Klickereignis eingibt.

Es gibt jedoch ein Problem. Obwohl das durch Klicken angegebene Ereignis aufgerufen wird, tritt immer noch ein Ereignissprudeln auf. Gleichzeitig wird auch das Klickereignis von div aufgerufen. Das ist ganz einfach. Fügen Sie einfach ein Ereignis hinzu, um das Sprudeln zu verhindern.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Bubbling-Ereignis stoppen</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="Standardereignis verhindern"></input>
 </form>
 <!-- „Submit“ verfügt über einen eigenen Übermittlungsereignismodus, wir möchten jedoch normalerweise nicht die Standardübermittlungszeit verwenden, sondern mein benutzerdefiniertes Ereignis. -->
</div>

(Schlüsselcode | Schlüsselalias): Der Rückruf wird nur ausgelöst, wenn das Ereignis durch eine bestimmte Taste ausgelöst wird.

Hören wir uns ein Tastenereignis auf der Tastatur an --- Hören Sie sich das Tastenereignis der Eingabetaste auf der Tastatur an

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <Eingabetyp="Text" @keyup.enter="keyup" /><br/><br/>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo"
  },
  Methoden:{
   Taste hoch() {
    console.log("Tastenkombination")
   }
  }
 });
</Skript>
</body>
</html>

@keyup.enter="keyup" Fügen Sie einfach .enter nach dem Keyup-Ereignis hinzu

einmal: den Rückruf nur einmal auslösen

Das Ereignis „.once“ wurde hinzugefügt. Nur der erste Klick reagiert, nachfolgende Klicks reagieren nicht.

2. v-if-Richtlinie

Bedingtes Urteil, es gibt drei Anweisungen

v-wenn
v-sonst-wenn
v-sonst

Zum Fall

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<!-- Während der Entwicklung stoßen wir häufig auf den Status 1: bedeutet aktiviert, 2: bedeutet deaktiviert, 3: bedeutet gelöscht -->
<div id="app">
 <h2 v-if = "status == 1"> Aktiviert</h2>
 <h2 v-else-if = "status == 2"> Deaktivieren</h2>
 <h2 v-else> Löschen</h2>
 
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Status: 1
  }
 });
</Skript>
</body>
</html>

Dieser Fall ist sehr einfach, deshalb werde ich nicht darüber sprechen. Eines kann ich sagen: Normalerweise gibt es nur zwei Fälle, zwei sehr einfache Fälle. Wir werden v-if und v-else verwenden. Wenn die Situation sehr kompliziert ist, ist es nicht empfehlenswert, viel v-else-if in den Code zu schreiben, da es nicht lesbar ist. Wir sollten das bedingte Urteil in Methoden oder Berechnungen einfügen und schließlich das Ergebnis zurückgeben.

Beispiel: Wechseln zwischen Konto-Login und E-Mail-Login auf der Login-Oberfläche

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<!-- Während der Entwicklung stoßen wir häufig auf den Status 1: bedeutet aktiviert, 2: bedeutet deaktiviert, 3: bedeutet gelöscht -->
<div id="app">
 <label v-if="userLogin">Kontoanmeldung<input type="text" placeholder="Bitte geben Sie Ihr Konto ein">
 </Bezeichnung>
 <label v-else>E-Mail-Login<input type="text" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein">
 </Bezeichnung>
 <button @click="userLogin = !userLogin" >Wechseln</button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Benutzeranmeldung: wahr
  }
 });
</Skript>
</body>
</html>

Hier definieren wir eine Variable userLogin, die angibt, ob der Benutzer angemeldet ist. Der Standardwert ist true. Definieren Sie zwei Beschriftungen und eine Schaltfläche. Klicken Sie auf die Umschaltschaltfläche, um zwischen den beiden Beschriftungen hin und her zu wechseln. Der Effekt ist wie folgt

Aber hier gibt es ein Problem. Nachdem wir den Inhalt eingegeben haben, verschwindet der Inhalt nicht, wenn wir das Textfeld wechseln. Wie unten gezeigt

Problem: Nach dem Umschalten des Typs wird der Eingabetext nicht gelöscht.

Wir haben festgestellt, dass die Eingabe von 1234 im Account-Login nicht gelöscht wurde, als wir zum E-Mail-Login gewechselt sind. Es handelt sich zwar um zwei Textfelder, aber wie wurden die Werte übertragen?

Grund

Dies liegt daran, dass Vue beim Rendern des DOM unter Berücksichtigung von Leistungsproblemen vorhandene Elemente so weit wie möglich wiederverwendet, anstatt jedes Mal neue Elemente zu erstellen. Dies ist das virtuelle DOM von Vue.

Wie oben gezeigt wurden unsere DOM-Elemente zuvor direkt auf der Browserseite gerendert. Aber nach dem Hinzufügen von Vue hilft uns Vue, die DOM-Elemente zuerst zwischenzuspeichern und sie als virtuelles DOM zwischenzuspeichern.

Wenn wir die v-if-Direktive verwenden, können zwei div-Elemente nicht gleichzeitig ausgeführt werden. Nachdem das erste div-Element gerendert wurde, findet es beim Rendern des zweiten div-Elements ein ähnliches Element, sodass vue eine Kopie zwischenspeichert. Bei der Ausführung von else stellt vue fest, dass die Elemente gleich sind, sich aber nur ein Teil des Inhalts unterscheidet. Anschließend rendert es die unterschiedlichen Teile und die gleichen werden nicht geändert. Der von uns eingegebene Inhalt liegt nicht innerhalb des Vergleichsbereichs und wird daher übernommen.

Wie kann man das vermeiden? Verwenden Sie den Attributschlüssel

<div id="app">
 <label v-if="userLogin">Kontoanmeldung<input type="text" placeholder="Bitte geben Sie Ihr Konto ein" key="user">
 </Bezeichnung>
 <label v-else>E-Mail-Login<input type="text" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein" key="email">
 </Bezeichnung>
 <button @click="userLogin = !userLogin" >Wechseln</button>
</div>

Wenn die beiden Schlüssel gleich sind, speichert der virtuelle Dom eine Kopie im Cache. Wenn die beiden Schlüssel unterschiedlich sind, speichert der virtuelle Dom zwei Kopien im Cache. Sehen wir uns diesmal die Auswirkung an.

3. v-show-Befehl

v-show ist sehr einfach, es blendet/zeigt nur Elemente

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<!-- Während der Entwicklung stoßen wir häufig auf den Status 1: bedeutet aktiviert, 2: bedeutet deaktiviert, 3: bedeutet gelöscht -->
<div id="app">
 <h2 v-if = "isShow"> Aktivieren</h2>
 <h2 v-show = "isShow"> Aktivieren</h2>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   isShow: true
  }
 });
</Skript>
</body>
</html>

Beide können angezeigt werden. Wir setzen isShow=false und beide werden ausgeblendet, aber die Ergebnisse des Ausblendens sind unterschiedlich. Schauen wir uns den HTML-Code an

Wir haben festgestellt, dass der Code nur ein useShow-Objekt enthielt und der Stil display:none hinzugefügt wurde, aber kein useIf-Objekt vorhanden war. Das heißt, es wurde direkt gelöscht.

Zusammenfassung: Der Unterschied zwischen v-if und v-show

v-if: true: Element hinzufügen, false: Element entfernen
v-show: true: Anzeigestil hinzufügen: Block; false: Anzeigestil ändern: keine

Wie treffen Sie also Ihre Wahl?

Wenn die Anzeige und die versteckten Schalter häufig sind, verwenden Sie v-show
Wenn nur ein Schalter vorhanden ist, verwenden Sie v-if

4. v-for-Richtlinie

Es gibt zwei Formen der Durchquerung: Array-Durchquerung und Objekt-Durchquerung

1. Durchlaufen eines Arrays

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <ul>
  <li v-for="item in languages">{{item}}</li>
  <li v-for="(item, index) in Sprachen"> {{index}}--{{item}}</li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Sprachen: ["Java", "PHP", "Python"]
  }
 });
</Skript>
</body>
</html>

Wenn Sie ein Array ohne Index durchlaufen, können Sie schreiben

<li v-for="item in languages">{{item}}</li>

Wenn es einen Index hat, können Sie es so schreiben

<li v-for="(item, index) in Sprachen"> {{index}}--{{item}}</li>

2. Objekte durchqueren

Es gibt drei Möglichkeiten, Objekte zu durchqueren

Nur den Wert des Objekts anzeigen
Zeigt den Schlüssel und den Wert des Objekts an
Index, Schlüssel und Wert eines Objekts anzeigen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <p> Nur den Wert des Objekts anzeigen </p>
 <ul>
  <li v-for="item in students">{{item}}</li>
 </ul>

 <p> Schlüssel und Wert des Objekts anzeigen </p>
 <ul>
  <li v-for="(Wert, Schlüssel) in Studenten">{{Schlüssel}} -- {{Wert}}</li>
 </ul>

 <p> ID des Objekts anzeigen </p>
 <ul>
  <li v-for="(Wert, Schlüssel, Index) in Studenten">{{index}} -- {{Schlüssel}} -- {{Wert}} </li>
 </ul>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Studierende:
    Name: "zhangsan",
    Alter: 20,
    Geschlecht: "männlich"
   }
  }
 });
</Skript>
</body>
</html>

Die spezifische Schreibweise ist wie oben gezeigt. Es ist zu beachten, dass bei der Anzeige von Schlüssel und Wert der Wert vorne und der Schlüssel hinten geschrieben wird.

3. Schlüsselattribute der Komponente

Es wird offiziell empfohlen, bei der Verwendung von v-for dem entsprechenden Element ein :key-Attribut hinzuzufügen.

Warum das Schlüsselattribut hinzufügen?

Weitere Einzelheiten finden Sie in diesem Artikel: www.jianshu.com/p/4bd5e745ce95

Nach dem Hinzufügen von :key wird die interne Rechenleistung verbessert. Wie sollte es also hinzugefügt werden?

<ul>
 <li v-for="Artikel in Studenten" :key="Artikel">{{Artikel}}</li>
</ul>

Bei der Verwendung, wie im obigen Beispiel: :key="item",

Schreibmethode: :key
Was ist ein Wert? Der Wert hier muss nacheinander dem Wert entsprechen. Wir setzen ihn also direkt auf das Element. Können wir ihn auf den Index setzen? Natürlich nicht, denn wenn wir Elemente im Array hinzufügen oder daraus entfernen möchten, ändert sich der Index.

4. Welche Methoden im Array reagieren?

Tatsächlich verwenden wir normalerweise die Indexänderung, wenn wir ein Array durchlaufen und den Wert des Arrays ändern.

wie:

diese.sprachen[0] = "aaaa";

Aber sehen wir uns an, was passiert, wenn in Vue eine Indexänderung stattfindet?

Wir haben festgestellt, dass die Sprachen geändert wurden, die Seite jedoch nicht. Tatsächlich wurde sie tatsächlich geändert.

Daher kommen wir zu dem Schluss, dass die direkte Änderung von Elementen über Indizes keine Reaktion bewirkt.

Was ist mit anderen Array-Methoden? Siehe das folgende Beispiel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <ul>
  <li v-for="(item, index) in Sprachen"> {{index}}--{{item}}</li>
 </ul>
 <br><br/><br/><br/><br/>
 <button @click="pushMethod">drücken</button>
 <button @click="popMethod">Pop</button>
 <button @click="shiftMethod">Umschalt</button>
 <button @click="unShiftMethod">Umschaltung rückgängig machen</button>
 <button @click="updateElement"></button>
 <button @click="spliceMethod">spleißen</button>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Sprachen: ["Java", "PHP", "Python", "Go", "C-Sprache"]
  },
  Methoden: {
   pushMethod() {
    this.languages.push("andere Sprachen")
   },
   popMethode() {
    diese.sprachen.pop()
   },
   shiftMethod() {
    diese.sprachen.shift()
   },
   unShiftMethod() {
    this.languages.unshift("andere Sprachen")
   },
   updateElement(){
    diese.sprachen[0] = "aaaa";
   },
   spliceMethode() {
    /**
     * Splice kann durchgeführt werden* 1. Elementspleiß hinzufügen (beginnend mit dem n-ten Element, 0, „Zukunftssprache 1“, „Zukunftssprache 2“)
     * 2. Elementverbindung löschen (beginnend mit dem n-ten Element mehrere Elemente löschen)
     * 3. Elemente ändern: Eigentlich bedeutet dies, zu löschen und dann Splice hinzuzufügen (beim Element beginnen, die Elemente ändern und den Inhalt der Elemente ändern).
     */
    // Element löschen //this.languages.splice(1, 1)
    // Elemente ändern //this.languages.splice(1, 2, "pthoon language", "go language")
    // Elemente hinzufügen this.languages.splice(1, 0, "Zukunftssprache 1", "Zukunftssprache 2")

   }
  }
 });
</Skript>
</body>
</html>

pushen (Elemente vom Ende hinzufügen---responsive
pop: Elemente vom Ende entfernen --- responsive
Umschalt: Element von oben entfernen --- reaktionsfähig
unshift: Elemente von oben hinzufügen --- responsive
splice: Elemente hinzufügen, Elemente ändern, Elemente löschen --- reaktionsfähig

Durch Tests wurde festgestellt, dass alle diese Methoden reaktionsfähig sind.

Wenn wir Elemente ändern/löschen möchten, empfiehlt es sich daher, Splice zu verwenden, damit die Wirkung sofort sichtbar ist.

5. V-Modell-Richtlinie

1. Grundlegende Verwendung des V-Modells

Die v-model-Direktive wird verwendet, um eine bidirektionale Bindung zwischen Formularelementen und Array-Elementen zu implementieren.

Wenn Sie Inhalte in das Eingabefeld eingeben, werden die eingegebenen Inhalte in Echtzeit an die Daten weitergegeben
Wenn sich Daten ändern, werden diese in Echtzeit mit dem Eingabefeld synchronisiert.
Zweiwegebindung

Fall: Zweiwege-Synchronisierung der Textfeldeingabe

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <form>
  <input type="text" placeholder="Bitte eingeben" v-model="message">
 </form>
 Der Inhalt der Nachricht ist: {{message}}
</div>

<script src="../js/vue.js"></script>
<Skript>
 let app = neues Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo"
  }
 });
</Skript>
</body>
</html>

Wir definieren eine Variable „Nachricht“ und verwenden dann v-model="message" im Eingabefeld, um eine bidirektionale Bindung mit dieser Variable durchzuführen.

2. Das Prinzip des V-Modells

Tatsächlich umfasst das V-Modell zwei Operationen

Eines ist v-bind: Daten an Eingabeattribut binden
Das andere ist v-on: Rufen Sie das Eingabeereignis des Eingabefelds auf, um die Daten in Echtzeit zu ändern

Fall: Simulation der zweistufigen Funktionsweise des V-Modells

Erstens wissen wir, dass wir v-bind:value direkt verwenden können, damit das Textfeld den Nachrichtenwert in den Daten anzeigt. Auf diese Weise reagiert das Textfeld automatisch, wenn wir den Nachrichtenwert ändern.

<input type="text" placeholder="Bitte eingeben" :value="message">

Dies dient dazu, auf die Daten im Textfeld zu reagieren. Wie kann also der geänderte Inhalt des Textfelds mit den Daten synchronisiert werden? Verwenden Sie das Eingabeereignis des Textfelds: v-on:input

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <input type="text" placeholder="Bitte eingeben" :value="message" @input="change">

 <p>Der Inhalt der Nachricht ist:{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<Skript>
 let app = neues Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo"
  },
  Methoden: {
   Änderung(Ereignis) {
    diese.Nachricht = Ereignis.Ziel.Wert;
   }
  }
 });
</Skript>
</body>
</html>

Hier wird @input verwendet, um das Eingabeereignis an das Textfeld zu binden. Die Methode change() hat keine Klammern und der Standardparameter event wird automatisch übergeben. Wenn Sie den Ereignisparameter explizit festlegen möchten, können Sie @input="change($event)" ausprobieren.

Legen Sie dann in der Änderungsmethode this.message = event.target.value; fest.

abschließend:

<Eingabetyp="Text" v-Modell="Nachricht">

Äquivalent zu

<input type="text" v-bind:value="nachricht" v-on:input="nachricht=$event.target.value">

2. Einsatz des V-Modells im Radio

Fall: Geschlechtsauswahl

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <form>
  <input type="radio" name="sex" id="male" value="sex" v-model="sex">sex <input type="radio" name="sex" id="female" value="sex" v-model="sex">sex</form>
 Die aktuelle Auswahl ist: {{sex}}
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   Geschlecht: "männlich"
  }
 });
</Skript>
</body>
</html>

Nach der Verwendung von v-model müssen Sie das Namensattribut nicht mehr verwenden. Standardmäßig werden Radios mit demselben v-model-Wert gruppiert.

3. Verwendung des V-Modells in der Checkbox

1) Kontrollkästchen

Fall: Sind Sie mit der Vereinbarung einverstanden?

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <label für="agreeContent">
   <input type="checkbox" name="agreeContent" id="agreeContent" value="Der Vereinbarung zustimmen" v-model="agreeContent">Einheitliche Vereinbarung<br/>Derzeit ausgewählt: {{agreeContent}}
 </Bezeichnung>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   agreeContent: false
  }
 });
</Skript>
</body>
</html>

Stimmen Sie der Vereinbarung zu: agreeContent in data: Der Wert ist true oder false. True bedeutet, dass das Textfeld ausgewählt ist, false bedeutet, dass es nicht markiert ist.

Hinweis: Vorteile der Beschriftung

Die Eingabe wird in ein Label eingebettet. Der Vorteil ist, dass durch Anklicken des Textes auch eine Auswahl und ein Abbruch erfolgen kann. Wenn er nicht in einem Label platziert ist, muss die Checkbox aktiviert werden.

2) Kontrollkästchen

Der Wert des Kontrollkästchens ist ein Array

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <h2>Radio-Box</h2>
 <label für="agreeContent">
 <input type="checkbox" name="agreeContent" id="agreeContent" value="Vereinbarung zustimmen" v-model="agreeContent">Vereinbarung zustimmen<br/>Derzeit ausgewählt: {{agreeContent}}
 </Bezeichnung>
 <br/><br/><br/><br/><br/>
 <h2>Kontrollkästchen</h2>
 <form>
  <input type="checkbox" name = "hobby" value="Tischtennis" v-model="hobbies">Tischtennis<input type="checkbox" name = "hobby" value="Basketball" v-model="hobbies">Basketball<input type="checkbox" name = "hobby" value="Fußball" v-model="hobbies">Fußball<input type="checkbox" name = "hobby" value="Volleyball" v-model="hobbies">Volleyball<br/>Das aktuell ausgewählte Hobby ist: {{hobbies}}
 </form>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   agreeContent: false,
   Hobbys:[]
  }
 });
</Skript>
</body>
</html>

Ein Hobby-Array wird in den Daten definiert. Und dieses Array wird an jedes Element im Kontrollkästchen-Zahlungsfeld gebunden. Dadurch wird der Effekt erzielt

Der Unterschied:

Die Daten, die einem einzelnen Kontrollkästchen entsprechen, sind vom Typ bool
Die Daten, die mehreren Kontrollkästchen entsprechen, sind ein Array-Typ

4. Verwendung des V-Modells in ausgewählten

1) Wählen Sie eine einzelne Option

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <v-Modell auswählen="Eins auswählen">
  <option id="Apfel" value="Apfel" >Apfel</option>
  <option id="Banane" value="Banane" >Banane</option>
  <option id="Erdbeere" value="Erdbeere" >Erdbeere</option>
  <option id="Traube" value="Traube" >Traube</option>
 </Auswählen>
 <br/>
 <p>Derzeit ausgewählt: {{selectOne}}</p>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   Geschlecht: "männlich",
   wähleEins:"Apfel"
  }
 });
</Skript>
</body>
</html>

Hinweis: In der Dropdown-Box „Select Radio“ sollte v-model auf das Auswahlelement geschrieben werden.

2) Mehrere Optionen auswählen

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <br/>
 <br/>
 <br/>
 <wählen Sie v-Modell="FavoriteFrite" mehrere>
  <option id="Apfel" value="Apfel" >Apfel</option>
  <option id="Banane" value="Banane" >Banane</option>
  <option id="Erdbeere" value="Erdbeere" >Erdbeere</option>
  <option id="Traube" value="Traube" >Traube</option>
 </Auswählen>
 <br/>
 <p>Derzeit ausgewählt: {{favoriteFrite}}</p>
</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   Lieblingsfritte:[]
  }
 });
</Skript>
</body>
</html>

Wenn Sie Mehrfachauswahl verwenden, fügen Sie in „Select“ ein Mehrfaches hinzu, um es als Mehrfachauswahl festzulegen.

In den Daten müssen wir es als Array festlegen. Zum Beispiel favoriteFrite:[]

Schauen wir uns die Wirkung an

Zusammenfassen:

Einzelauswahl: Es kann nur ein Wert ausgewählt werden, das V-Modell ist an einen Wert gebunden
Mehrfachauswahl: Sie können mehrere Werte auswählen, v-model ist an ein Array gebunden

6. V-Modell-Modifikatoren

1. Lazy-Modifikator

Standardmäßig wird das V-Modell in beide Richtungen in Echtzeit synchronisiert. Manchmal möchten wir aber nicht, dass es bei jeder Änderung in Echtzeit reagiert. In diesem Fall können wir den Lazy-Modifikator verwenden.

v-model.lazy, nach der Verwendung von Lazy drücken Sie die Eingabetaste oder das Textfeld wird defokussiert, d. h. der Inhalt wird synchronisiert

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 
 <input Typ="Text" v-model.lazy="Nachricht"/>
 <p>Der Inhalt der Nachricht ist:{{message}}</p>

</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   Anzahl: 0,
   Name: „zhangsan“
  }
 });
</Skript>
</body>
</html>

Sehen Sie die Wirkung

2. Zahlenmodifikator

Wenn wir ein Textfeld schreiben, in das nur Zahlen eingegeben werden können, schreiben wir normalerweise <input type="number" v-model = "count">

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
</Kopf>
<Text>
<div id="app">
 <Eingabetyp="Zahl" v-Modell = "Anzahl">
 <p>Zähltyp: {{count}} --- {{typeof count}}</p>

</div>

<script src="../js/vue.js"></script>
<Skript>
 var app = new Vue({
  el: "#app",
  Daten: {
   Nachricht: "Hallo",
   Anzahl: 0,
   Name: „zhangsan“
  }
 });
</Skript>
</body>
</html>

Aber welche Art von Zählwert erhält man, wenn man dies schreibt? Wir verwenden {{typeof count}}, um den Zähltyp anzuzeigen. Wie unten gezeigt

Wir können sehen, dass der Typ von count ein String und keine Zahl ist. Wie können wir count zu einer Zahl machen? Verwenden Sie v-model.number="count", wie unten gezeigt:

<Eingabetyp="Zahl" v-Modell.Zahl = "Anzahl">

3. Trimmmodifikator

Wenn wir Text in ein Textfeld eingeben, fügen wir normalerweise versehentlich ein Leerzeichen ein. Mit dem Trim-Modifikator können wir die Leerzeichen links und rechts vom Textfeld entfernen.

<Eingabetyp="Text" v-Modell.trim="Name">

Dies ist das Ende dieses Artikels über grundlegende Vue-Anweisungen mit Bildern und Beispielen. Weitere relevante grundlegende Vue-Anweisungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0
Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen und ihrer Verwendung
So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven
Detaillierte Erläuterung der benutzerdefinierten Anweisungen zur Vue.js-Quellcodeanalyse
Benutzerdefinierter Vue-V-HAS-Befehl zum Implementieren der Schaltflächenberechtigungsbeurteilung
Zusammenfassung der Entwicklung benutzerdefinierter Vue 3-Richtlinien
Wissenszusammenfassung zu benutzerdefinierten Anweisungen (Direktiven) für Vue3.0
8 sehr praktische benutzerdefinierte Vue-Anweisungen
Detaillierte Erklärung der benutzerdefinierten Anweisungen in Vue
Analyse des Implementierungsprinzips von Vue-Anweisungen

<<: Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm

>>: Eine kurze Diskussion über die Indexseitenstruktur, den Einfügepuffer und den adaptiven Hash-Index von InnoDB