Explain the similarities and differences of v model and v bind binding data in vue in detail

The template of vue adopts DOM template, that is to say, its template can be run as DOM node, and no error will be reported under the browser. There are three ways to bind data, one is interpolation, that is, {{name}}, and the other is {{name}} v-bind , and there is another one v-model . The form of {{name}} is easy to understand, that is, it is bound with the corresponding attribute in the instance data in the form of text. For example:

var app = new Vue({
 el: '#app',
 template: '<div @click="toggleName">{{name}}</div>',
 data: {
 name: 'tom',
 },
 method: {
 toggleName() {
 this.name = this.name === 'tom' ? 'sony' : 'tom'
 },
 },
})

In the string template above, there is a {{name}}, which is bound to data. name, and the view changes when data. name changes.

But v-bind And v-model These two kinds of bindings are difficult to distinguish, especially in form elements, which can confuse exactly how to use them at first.

v-bind

Let's first look at v-bind, which is used by adding a colon to follow attributions of html element, for example:

<p v-bind:class="classed">

What effect will v-bind: class have here? In fact, first of all, you can look at if you don't add v-bind:, that is: < p class="classed" > This is just a normal p element with a. classed class, with no data involved.

When v-bind: is added, it is not the same. Its value classed is not a string, but the variable data. classed corresponding to the vue instance. That is to say, what is the value of data. classed, it will pass what value to class attribute. When data. classed changes, class attribute also changes, which is very suitable for the occasion of animation effect through css. Except for class, most of the original attributes of html can be bound in this way, and for convenience, it can be abbreviated to colon form directly, for example:

var app = Vue({
 el: '#app',
 template: '<img :src="src">',
 data: {
 src: '',
 },
 beforeMount() {
 fetch(...).then(...).then(res => this.src = res.src) //  Modified here data.src
 },
})

In the above code, data. src is an empty string by default, which means that no picture will be displayed, but when the picture address is obtained from the remote end and data. src is updated, the picture will be displayed.

v-model

v-model is primarily used in form elements and implements bidirectional binding. Two-way binding is very familiar to everyone. Simply put, by default, it is the same as the data binding of the above two situations. When the data. name of the instance changes, the corresponding attempt will also change. However, after v-model is bound, it will be reversed. Manually entering new content in input will modify the value of data. name in turn. If data. name is used elsewhere in the view, this place will change due to the change of data. name, thus realizing the dynamic effect of association. Here's a chestnut:

var app = Vue({
 el: '#app',
 template: '<label><input v-model="name">{{name}}</label>',
 data: {
 name: '',
 },
})

Above < input > name is bound in, so when value of input changes, data. name will change accordingly, and where data. name changes {{name}} will also change accordingly.

v-model is a bi-directional binding, which means that the element you bind has the opportunity to change its value. So in fact v-model is basically only used on input, textarea, select form elements.

Mix v-bind and v-model

There are 1 cases where we need v-bind and v-model1. If you are not careful at this time, you will mess up the situation and can't tell where and how to control it. Take chestnuts:

<input :value="name" v-model="body">

There is a chestnut on it. data. name and data. body, who will change with whom? Even, will they conflict?

In fact, their relationship is the same as the above explanation. The effect produced by v-bind does not contain bidirectional binding. Therefore, the effect of value is to make the value attribute value of input equal to the value of data. name, while the effect of v-model is to make input and data. body establish bidirectional binding. Therefore, firstly, the value of data. data. body will give value attribute of input, and secondly, when the input value of input changes.

The question now is, when these two ones are used, who has the highest priority? Who will be invalid? Experiments show that v-model will be used, and v-bind is invalid at this time, because it is bound to value attribute, and v-bind will not be affected if it is bound to other attributes. In this case, v-bind is invalid, and even if you modify data. name, there will be no change in input.

This also shows that the bi-directional binding established by v-model has priority over input elements input, textarea, select, etc., and will enforce bi-directional binding if you like.
This shows that the use of v-bind and v-model in a separate input is unnecessary, although there is no conflict.

Note that I said "alone" above, that is to say, in a set of inputs, they are different. 1 Group of inputs includes radio group, check group, drop-down option and drop-down option group.

<label for="value in options">
 <input type="checkbox" :value="value" v-model="selected">
</label>

In data, they look like this:

data: {
 options: [1, 2, 3, 4, 5],
 selected: [],
}

One set of check boxes, or one set of drop-down options, in the case of select mutiple = "true", results in an array rather than a single value, so data. selected is an array, and when an option is selected, the value value of that option is added to data. selected (not in the order in options, but in the logic of the operation). At this time: value is valid, because it means passing the corresponding option value in options array to value, not bidirectional binding, but just passing the value in the past (of course, when the corresponding value in options changes, the value of value will also change). In other words, v-bind is responsible for the value of value and v-model is responsible for the selected state. Of course, v-model is bidirectional binding. If you check it on the interface, it will affect the value of data. selected. If you operate data. selected in the program, it will also affect the interface in turn. v-model affects the check effect, while v-bind affects the value. (In fact, although v-bind only affects the value, it will also affect the check effect. For example, one check box was originally checked, and if the binding value of v-bind changes, the new value will not be in data. selected, and this option will not be checked. If it is not checked, the changed value will be checked again in data. selected.)

Note that the above situation will take effect only when type= "checkbox" is determined, and the value of type cannot be a dynamic value, because when v-model is bound to the same variable many times, it is necessary to check the value of type, and if type is dynamic at this time, for example, using: type= "type" for dynamic binding, it will cause template compilation error.

v-model is actually the grammatical sugar of v-bind and v-on

This is specifically pointed out in the official document of vue. Before reading this sentence, I was very vague about it. When I read:

<input v-model="something"> Actually it is <input v-bind:value="something" v-on:input="something = $event.target.value"> Grammatical sugar of
This ambiguity of understanding is eliminated.

We didn't talk about v-on in this article, which is actually an event binder. Let's read 1 carefully < input v-bind:value="something" v-on:input="something = $event.target.value"> And found it to consist of two parts: v-bind:value And v-on:input Must be the value property and the input event, otherwise it will not be equivalent to v-model, and in the input event, something is exactly equal to the current input value.

Because of this principle, v-model is no longer difficult to understand in an instant.

Summary

In summary, to distinguish between v-bind and v-model, only three sentences need to be remembered:

1. v-bind is data binding and has no bidirectional binding effect, but it is not used on form elements, but can be used on any valid elements;
2. v-model is a bidirectional binding that is basically only used on form elements;
3. When v-bind and v-model are used on one element at the same time, their respective functions do not change, but v-model has higher priority, and it is necessary to distinguish whether this element occurs individually or in a group.