Vue Advanced Tutorial: Detailed Explanation of v-model

Share

The explanation on v-model on the Vue official website tutorial is not very detailed. The purpose of writing this article is to analyze it in detail and introduce Vue 2.2 v-modelThe improvements, and then interspersed with a little knowledge of Vue.

In Vue, there are many methods similar to Angular, mainly because Angular was the source of inspiration for Vue’s early development. However, there are many problems in Augular that have been solved in Vue.

v-model When used on input elements

v-modelAlthough it is very similar to Angular using two-way data binding ng- model, but Vue is a single data flow, v-model is just syntactic sugar: ↓

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

The first line of code is actually just syntactic sugar for the second line. Then the second line of code can be abbreviated like this: ↓

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

To understand this line of code, first you need to know that the input element itself has an oninput event, which is newly added to HTML5. Similar to onchange, whenever the content of the input box changes, oninput will be triggered and the latest value will be passed to sth.
If you don’t know where $event comes from, then you need to click on it and review the documentation.

We carefully observe the two lines of code of syntactic sugar and original syntax, and we can draw a conclusion:

When adding the v-model attribute to the element, the default value as an attribute of the element, and then use the 'input' event as a trigger event to deliver the value in real time

v-model When used on a component

v-model It can be used not only on input, but also on components. The following is an example similar to the Vue official website tutorial (we have to consider two issues when looking at this example):

Example demonstration.gif

The initial value of price of the parent component is 100. Changing the value of the child component can update the parent component in real time. ’s 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>

If you know the answers to these two questions, then congratulations on your true mastery of v-model, if you don’t understand, then You can take a look at this code: ↓

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

Now you know where value and input come from. Similar to what is summarized above:

When adding the v-model attribute to a component, the value will be used as the attribute of the component by default, and then the 'input' value will be used as the event name when binding events to the component

Disadvantages and solutions of v-model

When creating common components like check boxes or radio buttons, v-model is not easy to use.

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

v-model has provided us with value attributes and oninput events, but what we need is not value attribute, but the checked attribute, and when you click this radio button, it will not trigger the oninput event, it will only trigger the onchange event. This is embarrassing

The above is the detailed content of Vue Advanced Tutorial: Detailed Explanation of v-model. For more information, please follow other related articles on the PHP Chinese website!