Vue自定义指令

目录

1、注册全局自定义指令

2、注册局部自定义指令

3、指令定义对象的钩子函数

4、自定义指令的绑定值 

1、绑定数值常量

2、绑定字符串常量

3、绑定对象字面量

---

---

1、注册全局自定义指令

通过Vue.directive(id,definition)方法可以注册一个全局自定义指令，该方法可以接收两个参数：指令ID和定义对象。指令ID是指令的唯一标识，定义对象是定义的指令的钩子函数 

2、注册局部自定义指令

 通过Vue实例中的directive选项可以注册一个局部自定义指令。例如，注册一个局部自定义指令，通过该指令实现为元素添加边框的功能：

    
        我是ikun
    
 
 
 
 

上述代码中，在注册自定义指令时采用了小驼峰的命名方式，将自定义指令ID定义为addBorder，而在元素中应用指令时的写法为v-add-border。在为自定义指令命名时建议采用这种方式。

3、指令定义对象的钩子函数

 在注册指令的时候，可以传入definition定义对象，对指令赋予一些特殊的功能，一个指令定义对象可以提供的钩子函数如下表：

        钩子函数：

钩子函数	说明
bind	只能调用一次，在指令第一次绑定到元素上时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化设置
inserted	被绑定元素插入父元素时调用
update	指令在bind之后立即以初始值为参数进行第一次调用，之后每次当绑定值发生变化之后时调用，接收的参数为新值和旧值
componentUpdated	指令所在组件及其子组件更新时调用
unbind	只调用一次，指令从元素上解绑时调用

        binding参数对象包含的属性：

属性	说明
name	指令名，不包括v-前缀
value	指令的绑定值，例如：v-my-directive="1+1",value的值是2
oldValue	指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用
expression	绑定值的表达式或变量名，例如：v-my-directive="1+1",expression的值是"1+1"
arg	传给指令的参数，例如：v-my-directive:foo，arg的值是“foo”
modifiers	一个包含修饰符的的对象，例如：v-my-directive:foo.bar,修饰符对象modifiers的值是{foo:true,bar:true}

        binding参数使用实例：

 有时候，可能只需要使用bind和update钩子函数，这时可以直接传入一个函数代替定义对象：

 Vue.directive('XXX',function(el,binding){
    el.style.XXX=binding.value
 })

4、自定义指令的绑定值 

 自定义指令的绑定值除了可以是data中的属性之外，还可以是任意合法的JavaScript表达式，例如数值常量、字符串常量、对象字面量等。

1、绑定数值常量

    
真正的ikun永远都不会违背初心
 
 
 
 

 

2、绑定字符串常量

    
真正的ikun永远都不会违背初心
 
 
 
 

 

3、绑定对象字面量

    
小黑子露出鸡脚了吧！