1.directives节点
2.在定义时不需要使用v-前缀
3.函数中的el指向绑定的元素 触发的函数必须是bind
directives:{
color:{
bind(el){
el.style.color="red"
}
}
}
还可传值
<p v-color="‘blue‘">jjjj</p> //传进去一个字符串颜色
<p v-color="color">jjj</p> //传进去一个data属性里面的值
//使用
data(){
return {color:‘blue‘}
},
directives:{
color:{
bind(el,binding){
el.style.color=binding.value
}
}
},
4.bind与update函数
bind与update都是自定义指令里的函数，其中bind函数只调用一次，在数据更新后不会再被触发。
而update函数会在每次DOM更新后被调用。
eg：没点击按钮前，v-color绑定在p上，网页加载完触发一次bind函数，当点击按钮后，改变color的值，更新了dom，调用update
<button @click="color=‘blue‘">点击改变颜色</button>
<p v-color="color">jjjj</p>
directives:{
color:{
bind(el,binding){
el.style.color=binding.value
console.log("调用了bind");
},
update(el,binding){
el.style.color=binding.value
console.log("调用了update");
}
}
},5.简写：在bind与update函数中内容一样的时候 可以简写这种形式。
directives:{
color(el,binding){}
}
6.全局指令。
Vue.directive("指令名",function(el,binding){})