自定义指令总结:
一、定义语法:
(1).局部指令:
对象
一般用于需要元素在插入页面时就实现一些操作(函数做不到)
"big-number":{
//指定与元素绑定时
bind(element,binding){
element.value=binding.value;
},
//指定所在元素被插入页面时
inserted(element,binding){
element.focus();
},
//指令所在模板被重新解析时
update(element,binding){
element.value=binding.value;
},
}
函数
函数其实就是 bind 和 update合在一起 而没有inserted
directives: {
//1.指令与元素成功绑定时调用函数(一上来),
//2.指定所在的模板被重新解析时(任意data元素发生变化)
big(element, binding) {//element绑定的真实dom元素, binding绑定的值
element.innerText = binding.value * 10;
}
(2).全局指令:
Vue.directive('fbind',{
bind(element,binding){
element.value=binding.value;
},
//指定所在元素被插入页面时
inserted(element,binding){
element.focus();
},
//指令所在模板被重新解析时
update(element,binding){
element.value=binding.value;
},
})
Vue.directive('bing',function (element,binding) {
element.innerText = binding.value * 10;
})
注意 局部和全局的directive和directives的区别
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-,但使用时要加v-;
若在directives里面 直接写big 在模板里写v-big
2.指令名如果是多个单词用user-name命名方式,不要用驼峰userName命名。
注意 如果是 user-name在函数里要加’user-name’