Vue之自定义指令（directive）

目录

自定义一个获取焦点的指令  v-focus

钩子函数：

钩子函数参数：

自定义指令的简写

---

在Vue中，指令都是以 v-xxx 命令，因此自定义指令也是如此

自定义指令时，指令名称不需要加前缀v-,但在调用的时候一定要加前缀v-

自定义一个获取焦点的指令  v-focus

//定义一个全局的指令（directive：指令）
//参数1为指令名称，定义的时候，不需要加 v- ，调用时需要v- ,
//参数2是对象，对象中有指令相关函数，在特定时候运行，
Vue.directive('focus',{
    //获取当前指令(v-focus)绑定的元素e，e.focus()方法在绑定元素插入到DOM中时调用
    inserted:function(e){
       e.focus()
    }
})
//等同于js中： var e = document.getElementById("e")
//             e.focus()

//局部指令定义,vm实例中
directives:{
  focus:{
     inserted:function(e){
           e.focus()
     }
  }
}

钩子函数：

1. bind:只调用一次，第一次绑到到元素时调用，一般用在初始化中，在inserted之前，此时父节点为null，在dom树绘制之前调用，一般用作初始化属性（样式、元素属性）的设置，绑定后属性就已经在当前元素中了。
2. inserted:被绑定元素插入到父节点时调用，父节点存在即可，只调用一次，在dom树绘制之后调用，一般用作初始化方法（js的行为方法）的设置，绑定到DOM中后立即执行一次。
3. updated:所在的组件更新时调用,在componentUpdated之前调用，更新前的状态，多次调用
4. componentUpdated:所在的组件及及子元素全部更新时调用，更新后的状态，多次调用
5. unbind:只调用一次，指令与元素解绑时调用

 Vue.directive('指令名称',{
            //指令绑定到元素上的时候会立即执行，一般用作初始化，只执行一次，当指令刚被绑定到元素的时候，还没有插入到DOM树中去
            //绑定时不管有没有插入到DOM中，已经有了value="" 和 style="color:red"的属性
            //bind因此可以做一些初始化属性的设置
            bind:function (e) {  
                e.value = "文本框初始值"
                e.style.color = 'red'
            },
            inserted:function (e) { //元素插入到DOM树中后会立即执行一次，可作初始化方法的设置
                e.focus()
            },
            updated:function (e) { //vnode更新的时候会执行，可触发多次
               
            },
            componentUpdated:function (e) {

            },
            unbind:function (e) {

            }

        })


 

钩子函数参数：

1. el:指令被绑定的当前元素，即当前指令所在的元素，此参数名可以变更，其他参数名不能变更
2. binding:

• name:指令名，不包括v-前缀

• value:指令绑定值，v-color=" 'blue' "，"1+1"为2

• oldValue:指令绑定的前一个值

• expression:指令绑定值的字符串形式"1+1"就是"1+1"而不是2

• arg:传递给指令的参数v-color:blue

• modifiers:包含修饰符对象 v-mydirective.foo.bar modifiers为{foo.true,bar,true}

3.vnode:vue编译器生成的虚拟节点

4.oldVnode:上一个虚拟节点

Vue.directive("color",{
            bind:function (e,binding) {
                e.style.color = binding.value  
                e.style.color = binding.arg
            }
        })

//注意单引号，否则blue为data中数据

自定义指令的简写

如果只有bind或updated钩子函数，则可以简写

Vue.directive("color", (e,binding) => {
                e.style.color = binding.value  
                e.style.color = binding.arg
            
             })

//注意单引号，否则blue为data中数据