v-bind的使用

v-bind是为html元素绑定属性

缩写:

 

html的元素可以有原生属性和自定义属性，每个dom元素的原生属性可以自己上网查找

v-bind的三个修饰符的作用:

 在下面的代码中，使用了ref声明了dom元素的名称，id为该div元素的原生属性，data是使用了v-bind简写的方式，在divDom上声明了data的自定义属性

 运行结果为：

 可以看到在钩子函数中打印出的结果为undefined，自定义属性是无法在钩子函数中使用的

 当我们添加了prop修饰符后，运行结果为：

 控制台成功打印了自定义的data属性的值

prop修饰符的作用：自定义属性转为原生属性

在下面的代码中，打印了divDom元素

 控制台输出为:

 

在divDom的attributes属性中展示了该dom元素的所有属性，

所以， 当我们追加我们的data自定义属性的修饰符attr，并添加我们在钩子函数中写成attributes中的data时，

 

 控制台输出为：

 可以成功打印出data的值

.camel修饰符：- 将短横线命名的 attribute 转变为驼峰式命名。不做举例说明

v-bind还可以用来组件之间的传值，后续组件学习再记录