The specific use and difference between attribute and property in Vue

As attribute and property value and related processing in Vue.js

Attribute and property are concepts that are easily confused in Web development. As for value, it is even easier to confuse due to its special nature. This article attempts to sort out and illustrate

The concept of attribute and property

Simply put, attribute is the attribute of the element tag, and property is the attribute of the element object, for example:

<input id="input" value="test value">
<script>
let input = document.getElementById('input');
console.log(input.getAttribute('value')); // test value
console.log(input.value); // test value
</script>

• The value attribute of the input is defined by value="test value" in the tag, which 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. The initial value is consistent with the value assigned in the attribute.

Attribute and property binding

If you update the attribute value at the beginning, the property value will also change.

However, if you update the value of the property value (enter the text box or assign a new value to input.value), the value of the attribute will not change. Moreover, if you update the value of the attribute again, the value of the property will not change, as shown in this animation. You can also visit this page to try the operation.

This is actually the dirty value flag at work. The initial value of the dirty value flag is false, which means that updating the attribute value will change the corresponding property value by default. However, once the user interacts with the property value, the value of the dirty value flag becomes true, which means that updating the attribute value will not change the corresponding property value.

So in actual projects, we usually deal with the value of a property.

Vue.js's processing of value

Generally use: value

Vue.js's v-bind usually processes attributes. If you want to process it as a property, you need to add .prop

However, v-bind:value usually processes property values ​​by default because they are forced to be converted. For example:

<input id="input" :value="'test value'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
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"}}
  }
});
</script>

It can be seen that Vue.js uses value as the attribute of domProps in VNode's data, rather than the attribute of attrs, so after mounting it will become the value of the property.

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

// src/compiler/parser/index.js
function 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 the web platform is as follows:

// src/platforms/web/util/attrs.js
const 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 can be seen above, the value of input, textarea, option, select, progress that is not a button will be forced to be a property, and does not need to be set to: value.prop

For example, the textarea tag itself does not support the value attribute, so the value in the following code will not be displayed in the multi-line text box

<textarea value="test value"></textarea>

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

<textarea :value="'test value'"></textarea>

Special case use: value.prop

Another thing to note about the above Vue.js source code is that if it is forced to be a property, it must also satisfy !el.component, that is, it is not a dynamic component, because the value of el.component of a dynamic component is the value of its is attribute

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

<div id="app">
  <component :is="element" :value.prop="'test value'"></component>
  <button @click="change">Change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: '#app',
  data: {
    element: 'input'
  },
  methods: {
    change () {
      this.element = 'input' === this.element ? 'textarea' : 'input';
    }
  }
});
</script>

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

Summarize

• The binding relationship between the attribute and the property value will be invalidated after the user interacts and updates the value.
• Vue.js generally uses: value to make value a property
• Vue.js dynamic templates need to use: value.prop to make value a property

This is the end of this article about the specific usage and differences of attribute and property in Vue. For more relevant Vue attribute property content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!