Vue核心技术-31,自定义指令

一,前言

前边介绍了Vue内置的各种指令,如:v-if,v-show,v-for等
大多数情况下Vue提供的指令是可以满足日常开发需要的
但是有些时候我们需要针对特殊功能进行自定义指令,在内部进行DOM操作

二,自定义指令的注册

自定义指令的注册方式和组件相似,Vue提供了两种注册指令的方法:

1,全局注册

Vue.directive('指令名', {
    // 指令选项
})

2,局部注册

var vm = Vue({
    el:'#app',
    directive:{
        '指令名':{
            // 指令选项
        }
    }
})

是不是和组件的注册方式很相似

三,自定义指令的选项

自定义指令的选项是由几个钩子函数组成的,每个都是可选的

1,bind:

在指令第一次绑定到元素时被调用,且只会被调用一次
可用于在绑定时执行初始化操作

2,inserted:

被绑定元素插入父节点时调用
父节点存在即可调用,不必存在于document中

3,update:

被绑定元素所在的模板更新时调用,不管绑定值是否变化
通过比较更新前后的数据变化,忽略不必要的更新

4,componentUpdated:

被绑定元素所在模板完成一次更新周期是调用

5,unbind:

指令与元素解绑时调用,且只调用一次

一般使用bind钩子做初始化时的事件绑定,unbind中进行解绑

四,选项钩子函数的参数

每个钩子都有一下几个可用参数

1,el:

指令绑定的元素,可用作DOM操作

2,binding:

一个对象,包含以下几个属性:

name:
    不包含v-前缀的指令名(使用时需要补充v-)
oldValue:
    指令绑定的前一个值,只在更新选项钩子下可用(如:update和componentUpdated)
value:
    指令的绑定值
expression:
    指令绑定值的字符串形式
modifiers:
    修饰符对象
    如:v-directive.a.b,修饰符对象modifiers值为{a:true,b:true}

3,Vnode

Vue编译生成的虚拟节点

4,oldVnode

上一个虚拟节点,只在更新选项钩子下可用(如:update和componentUpdated)

五,自定义指令的使用

使用自定义指令创建一套大小写转换指令

<div id="test">
  <p v-upper-text="msg">p>
  <p v-lower-text="msg">p>
div>

<script type="text/javascript"> // 全局注册-大写转换 Vue.directive('upper-text', function (el, binding) { el.textContent = binding.value.toUpperCase() }) new Vue({ el: '#test', data: { msg: "Good Good Study, Day Day Up" }, // 局部注册-小写转换 directives: { 'lower-text'(el, binding) { el.textContent = binding.value.toLowerCase() } } }) script>

运行结果:

六,结尾

自定义指令就介绍到这里,对于项目中经常使用的工具方法可以写成自定义指令,方便使用