私有自定义指令
自定义指令需要在directives节点下创建私有自定义指令,创建好的指令通过v-指令名放到元素中
<template>
<div id="App">
<p v-color>这个文字编程红色</p>
</div>
</template>
<script>
export default {
data() {
return {
}
},
//自定义指令的节点
directives:{
//创建一个color指令,执行配置对象。
color:{
//当指令帮到元素上的时候,聚会出发bind函数
//el参数标识当前绑定的dom对象
bind(el){
el.style.color="red"
}
}
}
}
</script>
上述中,如果给元素添加颜色,只能绑定唯一的值,不能自己设定颜色,
在vue中,可以通过hinding.value获取属性绑定的颜色值。
<template>
<div id="App">
<p v-color='red'>通过属性值绑定的颜色变颜色</p>
<p v-color="'blue'">自己在v-color中自己设置颜色,需要通过字符串形式传入</p>
</div>
</template>
<script>
export default {
data() {
return {
color:'red'
}
},
directives:{
color:{
bind(el,binding){
el.style.color=binding.value
}
}
}
}
</script>
update函数
bind函数只能被调用一次,如果再次操作dom的颜色时,bind函数就不会触发,而update函数可以在每次dom更新时触发。
<template>
<div id="App">
<p v-color='red'>通过属性值绑定的颜色变颜色</p>
<p v-color="'blue'">自己在v-color中自己设置颜色,需要通过字符串形式传入</p>
<button @click="color='blue'">点击变换颜色</button>
</div>
</template>
<script>
export default {
data() {
return {
color:'red'
}
},
directives:{
color:{
//只能被触发一次
bind(el,binding){
el.style.color=binding.value
},
//在每次dom更新的时候触发
update(el,binding){
el.style.color=binding.value
}
}
}
}
</script>
自定义指令的简写形式
简写形式可以包含bind和update两个函数,减少代码的重复,直接将指令变成函数。
<template>
<div id="App">
<p v-color='red'>通过属性值绑定的颜色变颜色</p>
<p v-color="'blue'">自己在v-color中自己设置颜色,需要通过字符串形式传入</p>
<button @click="color='blue'">点击变换颜色</button>
</div>
</template>
<script>
export default {
data() {
return {
color:'red'
}
},
directives:{
//将指令对象改写成指令函数
color(el,binding){
el.style.color=binding.value
}
}
}
</script>
定义全局自定义属性
全局自定义指令要在main.js下定义,使用Vue.directive() 函数。
Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})
或者
这是借助ES6的箭头函数形式
Vue.directive('color', (el,binding)=>el.style.color=binding.value)