Attribute /property在vue中应用

概念

Attribute是元素标签的属性；property是元素对象的属性。<input id="a" value="text value"><script>let input = document.getElementById("a")console.log(input.getAttribute("value"))console.log(input.value)</script> 两者打印结果一致

• input的value attribute是通过标签里value="text value"定义，所以使用input.getAttribute(),如果需要修改则使用setAttribute(value,newValue)
• input的property可以通过input.value获取

vue.js对value的处理

Vue.js 的 v-bind，一般情况下是在处理 attribute，如果要作为 property 处理的话，需要加上 .prop不过 v-bind:value 却大都默认为处理 property 值，因为被强制转化了，例如：<input id="a" value="text value"><script>mounted(){console.log(this.$el.getAttribute('value'))console.log(this.$el.value)console.log(this._vnode.data)}</script>第一个console结果为null,第二个是text value,第三个结果是{attrs:{id:"input"},domProps:{value:"text value"}}可见，vue.js将value作为vNode的data中domProps属性，而不是attrs属性，所以挂载后会作为property属性的value