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

巴扎黑
Freigeben: 2017-06-27 09:08:35
Original
2449 Leute haben es durchsucht

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" />
Nach dem Login kopieren

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" />
Nach dem Login kopieren

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 , 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>
Nach dem Login kopieren

< der übergeordneten Komponente in Echtzeit aktualisieren 🎜>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>
-->
Nach dem Login kopieren
Jetzt wissen Sie <🎜 Woher kommen > 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" />
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage