vue2中的自定义指令

一.自定义指令

自定义指令又分为局部指令、全局指令

局部指令使用directive s，与data同级。注：有s
全局指令使用directive，通常放在vue示例上面

• 局部指令用法

directives:{
       //对象式
            num:{
                // 元素绑定成功调用
                bind(event,binding){
                    console.log(event);
                    console.log(binding);
                },
                // 元素插入页面时调用
                instanceof(event,binding){
                    console.log(event);
                    console.log(binding);
                },
                // 值发生改变时调用
                uptate(event,binding){
                    console.log(event);
                    console.log(binding);
                }
            }
        }
        //函数式
          directives:{
            num(event,binding){
                
            }
        },

• 全局自定义指令

 Vue.directive("num1",function(event,binding){
        console.log(event);
        console.log(binding);
    })

如果使用箭头函数，this就会指向Window。

二、总结

自定义指令
规则：1.定义指令名称时不要使用v-和驼峰，需要使用-连接，需要加引号
2.使用时需要v-
3.对象式
“指令名”:{
绑定成功触发
bind(元素,绑定对象){},
插入页面触发
inserted(元素,绑定对象){},
元素解析触发(值改变)
update(元素,绑定对象){}
}
4.函数式
“指令名”(元素,绑定对象){}
1.局部自定指令
directives,需要定义在Vue实例中
2.全局自定义指令
directive,需要定义在Vue实例之前
- [x] 打卡3.17