Vue v-bind修饰符.prop property 与 attribute 的差别

声明:前面没有带入Vue描述,Vue在后面带入

在浏览器解析 DOM 树渲染页面后，每个标签都会生成一个对应的 DOM 节点。节点是一个对象，所以会包含一些 properties，attributes 也是其中一个property

–在一个国外论坛上找到的,希望能够方便理解–
HTML attribute vs. DOM property
  HTML 属性与 DOM 属性
The HTML attribute value specifies the initial value; the DOM value property is the current value.
 HTML 属性值指定初始值； DOM 属性值是当前值

区别

说明	attributes	property
访问方式	document.getElementById(‘id’).attributes.*	document.getElementById(‘id’).*
可访问的属性	包含标签里定义的所有属性	只包含 HTML 标准的属性，不包含自定义属性

.prop

使用 v-bind前:

--html--
<input  id="b" value="aaa" dd="www" >	<!--value在input中并非自定义属性-->
<组件	id="c"	value="ccc" ></组件>	<!--value是 自定义属性-->

--控制台--
document.getElementById("b").attributes.value		=> 	value="aaa"
document.getElementById("b").value					=>	"aaa"

document.getElementById("b").attributes.dd			=>	dd=​"www"
document.getElementById("b").dd						=>	undefined

document.getElementById("c").attributes.value		=>	value="ccc"
document.getElementById("c").value					=>	undefined

//此时在 input中删除"aaa",输入"abc"

document.getElementById("b").attributes.value		=> 	value="aaa"
document.getElementById("b").value					=>	"abc"

使用 v-bind后:
算了,不描述多余话了,我相信已经你学过了
总而言之都是一个意思

默认 自定义属性不会出现在property中,可以通过.prop添加到property,不过原来的attributes会被删除
记住!HTML标准的属性存在property和attributes之中,若加上了v-bind后attributes会被删除,也就是加上v-bind的HTML标准的属性,是默认带有.prop的,在加上.prop并不会改变什么

我刚刚不是在学 动态组件与异步组件 吗!
我为什么要花大量时间看这个!好像没啥用啊!(っ °Д °;)っ