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.
v-model
Obwohl 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 , 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
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):
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('currency-input', { template: ` <span> <input ref="input" :value="value" <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?--> @input="$emit('input', $event.target.value)" > </span> `, props: ['value'],// 为什么这里要用 value 属性,value在哪里定义的?貌似没找到啊? })var demo = new Vue({ el: '#demo', data: { price: 100, } })</script>
. 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> -->
? Ähnlich wie oben zusammengefasst: value
input
Wenn 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
v-model
<input type="checkbox" v-model="sth" />
-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!