vue自定义指令

---

一、局部指令

对象式
“指令名”:{

1. 绑定成功触发
   bind(元素,绑定对象){},
2. 插入页面触发
   inserted(元素,绑定对象){},
3. 元素解析触发(值改变)
   update(元素,绑定对象){}
   }

 var vm = new Vue({
        el:"#app",
        data() {
            return {}
        },
        directives:{
            num:{
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                },
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                },
                update(element,binding){
                     console.log(element);
                    console.log(binding);
                }
            }
        })

函数式
“指令名”(元素,绑定对象){}
自带原先三个函数的内置方法
注意函数式指令名必须添加 " " 或 ’ ’

 var vm = new Vue({
        el:"#app",
        data() {
            return {}
        },
        directives:{
            "num-ing"(element,binding){
                 console.log(element);
                 console.log(binding);
            }
            }
        })

二、全局指令

1.directive,需要定义在Vue实例之前

Vue.directive("num",function(element,binding){
        console.log(this);
    })

注意点

---

1. 定义指令名称时不要使用v-和驼峰，需要使用-连接，需要加引号
2. 使用时 v- 自定义名称
3. 局部自定指令：directives,需要定义在Vue实例中
4. 全局自定义指令：directive,需要定义在Vue实例之前

---