Vue Advanced Tutorial: Detaillierte Erläuterung des V-Modells

Teilen

Die Erklärung zu v-model im Tutorial der offiziellen Vue-Website ist nicht sehr detailliert. Der Zweck des Schreibens dieses Artikels besteht darin, ihn im Detail zu analysieren und die Verbesserungen von Vue 2.2 vorzustellen v-model. und dann streuen wir es ein. Reden wir über ein wenig Wissen über Vue.

In Vue gibt es viele ähnliche Methoden wie Angular, vor allem weil Angular die Inspirationsquelle für die frühe Entwicklung von Vue war. Es gibt jedoch viele Probleme in Augular, die in Vue gelöst wurden.

---

Wenn das V-Modell für Eingabeelemente verwendet wird

v-modelObwohl es Angulars ng-model, das eine bidirektionale Datenbindung verwendet, sehr ähnlich ist, handelt es sich bei Vue um einzelne Daten flow. v-model ist nur syntaktischer Zucker: ↓

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

Die erste Codezeile ist eigentlich nur syntaktischer Zucker für die zweite Zeile. Dann kann die zweite Codezeile wie folgt abgekürzt werden: ↓

<input :value="sth" @input="sth = $event.target.value" />

Um diese Codezeile zu verstehen, müssen Sie zunächst wissen, dass das input-Element selbst ein oninput-Ereignis hat, das neu hinzugefügt wird zu HTML5, ähnlich wie onchange , wenn sich der Inhalt des Eingabefelds ändert, wird oninput ausgelöst und das neueste value an sth übergeben.
Wenn Sie nicht wissen, woher $event kommt, müssen Sie darauf klicken und die Dokumentation lesen.

Wir beobachten die beiden Codezeilen von Syntax Sugar und Originalsyntax sorgfältig und können eine Schlussfolgerung ziehen:

Beim Hinzufügen des V-Model-Attributs zum 73a3ca28445b1c625f2086a50cb8c7df , das V-Modell-Attribut wird standardmäßig als Attribut des Elements hinzugefügt und dann das „Eingabe“-Ereignis als Auslöserereignis für die Echtzeitlieferung des Werts verwendet

---

Wenn v- Das Modell wird auf einer Komponente

v-model verwendet und kann nicht nur in input verwendet werden, sondern auch auf Komponenten. Das Folgende ist ein Beispiel, das dem Tutorial der offiziellen Vue-Website ähnelt (wir müssen zwei Probleme berücksichtigen). wenn Sie sich dieses Beispiel ansehen):

Example Demonstration.gif

Der Anfangswert des price der übergeordneten Komponente ist 100. Ändern der Der Wert der untergeordneten Komponente kann den price

<div id="demo">  <currency-input v-model="price"></currentcy-input>  <span>{{price}}</span></div><script src="https://cdn.bootcss.com/vue/2.3.0/vue.js?1.1.11"></script><script>Vue.component(&#39;currency-input&#39;, {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
        @input="$emit(&#39;input&#39;, $event.target.value)"
      >
    </span>
  `,
  props: [&#39;value&#39;],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})var demo = new Vue({
  el: &#39;#demo&#39;,
  data: {
    price: 100,
  }
})</script>

---

Wenn Sie die Antworten auf diese beiden Fragen kennen, dann herzlichen Glückwunsch, Sie haben es wirklich gemeistert

. Wenn Sie es nicht verstehen, können Sie sich diesen Code ansehen: ↓v-model

<currency-input v-model="price"></currentcy-input><!--上行代码是下行的语法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

Jetzt wissen Sie und

? Ähnlich wie oben zusammengefasst: valueinputWenn Sie das V-Modell-Attribut zu einer Komponente hinzufügen, wird der Wert standardmäßig als Attribut der Komponente verwendet und der „Eingabe“-Wert wird als Ereignis verwendet Name beim Binden von Ereignissen an die Komponente

Nachteile und Lösungen des V-Modells

---

Beim Erstellen allgemeiner Komponenten wie Kontrollkästchen oder Optionsfelder ist

nicht einfach zu verwenden.

v-model

<input type="checkbox" v-model="sth" />

stellt uns das

-Attribut und das v-model-Ereignis zur Verfügung. Was wir jedoch brauchen, ist nicht das value-Attribut, sondern das oninput-Attribut, und wenn Sie Klicken Sie hierauf. Das value-Ereignis wird nicht ausgelöst, wenn das Optionsfeld ausgewählt ist, sondern nur das checked-Ereignis. Das ist peinlichoninput

Das obige ist der detaillierte Inhalt vonVue Advanced Tutorial: Detaillierte Erläuterung des V-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!