引言
你真的了解v-bind
吗,它的api
其实挺多的,如果你没有仔细看完官网,恐怕只知道v-bind
是用来绑定值可变的属性。如果不愿意看官网的小伙伴或者是觉得官网晦涩难懂,看完我这篇文章,你会熟悉更多关于v-bind
的使用。
详细用法
1.当元素的属性值要求为变量时,我们可以使用v-bind来修饰属性
2.v-bind修饰的属性值里,可以写js表达式
3.当 v-bind的属性值为对象时会将对象展开作为标签的属性,优先级要注意,v-bind赋予的属性优先级始终最低
<div id=2 v-bind="{id:1,name:box}">hhh</div>
<!--以上写法相当于-->
<div id=2 name='box'>hhh</div>
4.修饰符:
.prop
- 作为一个 DOM property 绑定而不是作为 attribute(HTML property) 绑定。其中差异看下文。
.camel
- 将 kebab-case attribute 名转换为 camelCase。
.sync
- 自定义事件的语法糖,会扩展成一个更新父组件绑定值的 v-on
侦听器。下面有例子说明。
表达式的使用
<div :key='Math.random()+Date.now()'></div>
dom属性和html属性的差异
<body>
<input type="text" value="1" >
<button>get value</button>
<script>
const input=document.querySelector('input')
document.querySelector('button').addEventListener('click',function(){ //输入2后点击按钮
console.log(input.value) //读取dom属性 ,2
console.log(input.getAttribute('value')) //读取html属性 ,1
})
</script>
</body>
.sync修饰符的使用
使用场景:如果子组件也需要更新v-bind绑定的属性,使用该修饰符可以省去订阅(自定义事件监听)的代码。注意:这个只能在vue2中使用,vue3中是被摈弃了。
this.$emit('update:title', newTitle) // 子组件发布信息,'update:prop'是规定写法
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:
<text-document
v-bind:title="doc.title"
@update:title="doc.title = $event" <--此时 $event 是收到的参数-->
></text-document>
以上写法等同于下面
<text-document v-bind:title.sync="doc.title"></text-document>
作为展开属性用法的变化
采用对象的覆盖形式,更符合人的思维方式
<!--vue2.x-->
<div color='blue' v-bind="{color:'red'}">hh</div>
<!--以上相当于-->
<div color='blue' >hh</div>
<!--vue3.x-->
<div v-bind="{color:'red'}" color='blue'>hh</div>
<!--以上相当于-->
<div color='blue' >hh</div>
结尾
总之,v-bind
相对于其他指令的用法还算挺多的。最后,感谢大家的观看,希望这篇文章能给你们带来一些帮助,如果有小伙伴有一些疑问或者建议,欢迎提出和分享。