Vue advanced tutorial: v-model, vuev-model

Vue advanced tutorial: v-model, vuev-model

Share

Tutorial on the official Vue websitev-modelThe purpose of this article is to analyze it in detail and introduce Vue 2.2v-modelThen, let's talk about the Vue knowledge.

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

When v-model is used on the input element

v-modelAlthough it is similar to using Angular with two-way data bindingng-modelBut Vue is a single data stream,v-modelIt's just a 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 the syntax sugar of the second line. The second line of code can also be abbreviated as follows:

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

To understand this line of code, first you need to knowinputThe element itself has an oninput event, which is newly added to HTML5, similaronchangeWhen the content of the input box changesoninput, Put the latestvaluePasssth.
If you don't know where $ event comes from, click it to review the document.

Let's take a closer look at the two lines of code: the syntactic sugar and the original syntax. We can draw a conclusion:

When the v-model attribute is added to the <input/> element, the value is used as the element attribute by default, And the 'input' event is used as the trigger event for real-time value passing.

When v-model is used on Components

v-modelNot onlyinputIt can also be used on components. The following is an example similar to the tutorial on the official Vue website (we need to consider two issues when looking at this example ):

Demo .gif

Parent componentpriceThe initial value is 100. Changing the value of the Child component can update the value of the parent component in real time.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"> </script> <script> Vue. component ('currency-input', {template: '<span> <input ref = "input": value = "value" <! -- Why is 'input' used as the event name to trigger the event? Where is the 'input' defined? --> @ Input = "$ emit ('input', using event.tar get. value) "> </span> ', props: ['value'], // Why is the value attribute used here? Where is the value defined? Seems not found ?}) Var demo = new Vue ({el: '# demo', data: {price: 100, }}) </script>

If you know the answers to these two questions, congratulations!v-modelIf you do not understand, you can refer to this Code: Release

<Currency-input v-model = "price"> </currentcy-input> <! -- The upstream code is the downstream syntactic sugar <currency-input: value = "price" @ input = "price = arguments [0]"> </currency-input> -->

Now you knowvalueAndinputWhere did they come from. Similar to the above summary:

When the v-model attribute is added to a component, the value is used as the component property by default, and the 'input' value is used as the event name when the component is bound to an event.

Disadvantages and Solutions of v-model

When you create common components such as check boxes or single quotes,v-modelIt is not easy to use.

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

v-modelProvided to usvalueAttributes andoninputEvent, but what we need is notvalueAttribute,checkedAttribute, and it will not be triggered when you click this ticketoninputEvent, it will only triggeronchangeEvent. This is embarrassing.