Home>

In vue, there are many methods similar to angular, mainly because angular was the inspiration for early development of vue.However, there are many problems in augular,This has been resolved in vue.

When v-model is used on an input element

Although v-model is very similar to angular ng-model using two-way data binding, 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 on the second line.Then the second line of code can be shortened to 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. This is a new addition to html5.Similar to onchange, whenever the content of the input box changes,Will trigger oninput and pass the latest value to sth.

If you don't know $eventWhere did it come from,Then you need to click on it and review the documentation.

We take a closer look at the two lines of syntax sugar and the original syntax.One conclusion can be drawn:

When adding a v-model attribute to anelement, value will be used as the attribute of the element by default,Then use the "input" event as a trigger event to pass the value in real time

When v-model is used on a component

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

The initial value of the price of the parent component is 100. Changing the value of the child component can update the price of the parent component in real time

<div>
 <currency-input v-model="price"></currentcy-input>
 <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"<&//script>
<script>
vue.component ("currency-input", {
 template:`
  <span>
   <input
    ref="input"
    :value="value"
    <!-Why "input" is the name of the event that triggers the event?Where is `input` defined?->
    @input="$emit (" input ", $event.target.value)"
   >
  </span>
 `, props:["value"], //Why use the value attribute here, where is the value defined?Looks like it wasn't found?
})
var demo=new vue ({
 el:"#demo", data:{
  price:100, }
})
</script>

If you know the answer to these two questions,So congratulations, you really have mastered v-model. If you do n’t understand,Then you can look at this code:↓

<currency-input v-model="price"></currentcy-input>
<!-Uplink code is syntactic sugar for downlink
 <currency-input:value="price"@input="price=arguments [0]"></currency-input>
->

Now you know where value and input came from.Similar to the summary above:

When adding a v-model attribute to a component, value is used as the attribute of the component by default.Then use the "input" value as the event name when binding events to the component

V-model disadvantages and solutions

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

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

v-model provides us with the value attribute and the oninput event, but what we need is not the value attribute, but the checked attribute, and when you click this radio box, the oninput event will not be triggered, it will only trigger the onchange event . This is embarrassing😓

Because v-model only uses the input element, this situation is easy to solve:↓

<input type="checkbox":checked="status"@change="status=$event.target.checked" />

When v-model is used on the component:↓

<my-checkbox v-model="foo"<&/my-checkbox>
vue.component ("my-checkbox", {
 tempalte:`<input
        type="checkbox"
        @change="$emit (" input ", $event.target.checked)"
        :checked="value"
       />`
 props:["value"],})

In vue 2.2, you can customize props/events with mode l option when defining components:↓

<my-checkbox v-model="foo"<&/my-checkbox>
vue.component ("my-checkbox", {
 tempalte:`<input
        type="checkbox"
        <!-Input is not used here, but balabala->
        @change="$emit (" balabala ", $event.target.checked)"
        :checked="value"
       />`
 props:["checked"], //value is not used here, but checked
 model:{
  prop:"checked",  event:"balabala"
 },})
  • Previous Use and implementation of ng-include directive in AngularJs
  • Next Quick Start Tutorial for Common Size Units (dp, sp) in Android