自定义指令
分类
- 私有自定义指令
- 全局自定义指令
私有自定义指令
在每个vue组件中，可以再directives节点下声明私有自定义指令，只有该组件自身可用，
子组件也无法使用
<script>
export default{
directives:{
color:{ //调用时：v-color
//为绑定到的html元素设置红色字体
//当指令第一次被绑定在元素上的时候，会自动触发bind函数
bind(el){
//形参el：绑定此指令的原生dom对象
el.style.color = 'red'
}
}
},
}
</script>
自定义指令接收的值
<p v-color="color">123</p>
<p v-color="'blue'">123</p> //接收的值为字符串，多加一层引号
<script>
export default{
data:{
return {
color:'red'
}
}
directives:{
color:{ //调用时：v-color
//为绑定到的html元素设置红色字体
//当指令第一次被绑定在元素上的时候，会自动触发bind函数
bind(el,binding){
//形参el：绑定此指令的原生dom对象,
//binding:官方名称，名称可自定义,接受一个对象
el.style.color = binding.value
}
}
},
}
</script>
update函数
bind函数只有在第一次绑定的时候会被调用，当Dom更新的时候bind函数不会触发。
update函数会在每次Dom更新的时候被调用，但第一次绑定时不会调用
<p v-color="color">123</p>
<button @click="color='blue'"> </button> //修改color的值
<script>
export default{
data:{
return {
color:'red'
}
}
directives:{
color:{
//bind只有当指令第一次被绑定在元素上的时候，会自动触发bind函数，之后若更改color的值也不会更新
bind(el,binding){
//形参el：绑定此指令的原生dom对象,
//binding:官方名称，名称可自定义,接受一个对象
el.style.color = binding.value
},
//在每次dom更新时都会触发，但第一次绑定的时候不会触发
update(el,binding){
//形参el：绑定此指令的原生dom对象,
//binding:官方名称，名称可自定义,接受一个对象
el.style.color = binding.value
}
}
},
}
</script>
函数指令的简写形式
当bind函数和update函数内容一致时，可以进行简写
<p v-color="color">123</p>
<button @click="color='blue'"> </button> //修改color的值
<script>
export default{
data:{
return {
color:'red'
}
}
directives:{
//简写
color(el,binding){
el.style.color=binding.value
}
},
}
</script>
全局自定义组件
需要通过vue.directive()进行声明
注意：全局声明的指令或过滤器需要放在main.js文件中
Vue.directive('color',
{
bind(el,binding){el.style.color=binding.value},
update(el,binding){el.style.color=binding.value}
})
//简写
Vue.directive('color',function(el,binding){
el.style.color=binding.value
})
\
