Shulou(Shulou.com)06/03 Report--

This article mainly introduces what is the difference between attribute and property in vue, it has a certain reference value, interested friends can refer to it, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Related processing of value and Vue.js as attribute and property

Attribute and property are easily confused concepts in Web development, but for value, because of its particularity, it is easier to be confused. This paper tries to sort out and exemplify it.

The concept of attribute and property

To put it simply, attribute is the attribute of the element tag, and property is the attribute of the element object, for example:

Let input = document.getElementById ('input'); console.log (input.getAttribute (' value')); / / test valueconsole.log (input.value); / / test value

The value attribute of input is defined by value= "test value" in the tag. It can be obtained by input.getAttribute ('value') and updated by input.setAttribute (' value', 'New Value').

The value property of input can be obtained and updated through input.value, and the initial value is consistent with the assignment in attribute.

Binding of attribute and property

If you update the value of attribute value at the beginning, the value of property will change accordingly

However, if you update the value of property value (enter it in the text box or assign a new value to input.value), the value of attribute will not change accordingly, and if you update the value of attribute at this time, the value of property will no longer change. As shown in the animation, you can also visit this page to try to operate.

This is actually the dirty value tag (dirty value flag) at work. The initial value of dirty value flag is false, that is, the update of attribute value will change the corresponding property value by default, but once the user interactively modifies the value of property value,dirty value flag, it will become true, that is, the update of attribute value will not change the corresponding property value.

So in the actual project, we usually deal with value as property.

The treatment of value by Vue.js

General usage: value

The v-bind of Vue.js is generally dealing with attribute. If you want to handle it as property, you need to add .prop.

However, v-bind:value mostly defaults to dealing with property values because it is forced to convert, for example:

Let input = new Vue ({el:'# input', mounted () {console.log (this.$el.getAttribute ('value')); / / null console.log (this.$el.value); / / test value console.log (this._vnode.data) / / {attrs: {id: "input"}, domProps: {value: "test value"})

It can be seen that Vue.js regards value as the attribute of domProps in the data of VNode, not the attribute of attrs, so when mounted, it becomes the value as property.

In the Vue.js source code, the forced conversion of property is handled as follows:

/ / src/compiler/parser/index.jsfunction processAttrs (el) {... If ((modifiers & & modifiers.prop) | | (! el.component & & platformMustUseProp (el.tag, el.attrsMap.type, name)) {addProp (el, name, value, list [I], isDynamic)} else {addAttr (el, name, value, list [I], isDynamic)}

The definition of platformMustUseProp on web platform is as follows:

/ / src/platforms/web/util/attrs.jsconst acceptValue = makeMap ('input,textarea,option,select,progress') export const mustUseProp = (tag: string, type:? string Attr: string): boolean = > {return ((attr = 'value' & & acceptValue (tag)) & & type! = =' button' | | (attr = 'selected' & & tag =' option') | | (attr = 'checked' & & tag =' input') | | (attr = = 'muted' & tag =' video'))})}

As you can see from the above, the value of input, textarea, option, select, progress that is not of type button will be forced to be property instead of being set to: value.prop

For example, the textarea tag itself does not support value attribute, so the value of value in the following code does not appear in the multiline text box

But in Vue.js, the following code can be successfully bound to value property and displayed in a multiline text box

Special case use: value.prop

The above Vue.js source code should also be noted that it is mandatory as property, and it also satisfies! el.component, that is, it is not a dynamic component, because the value of the el.component of a dynamic component is the value of its is attribute.

That is, the v-bind of dynamic components is used as attribute by default. If you want to be a property, you should use .prop, for example:

Changelet app = new Vue ({el:'# app', data: {element: 'input'}, methods: {change () {this.element =' input' = = this.element? 'textarea':' input';})

If you delete the .prop of: value.prop in the above component, when you switch to textarea, its value will not be displayed in the multi-line text box. You can click the switch tab on this page to view it.

Thank you for reading this article carefully. I hope the article "what's the difference between attribute and property in vue" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.