首页 > 技术文章 > vue中的自定义指令

zhang-jiao 2019-08-15 14:26 原文

vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令

在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的, 

通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解

1.自定义指令可以是全局的,也可以是局部的,全局和局部的区别估计不用多说,大家都知道。

下面我们先了解一下Vue.directive({})内部的钩子函数以及重要的钩子函数的参数,有助于我们对

自定义指令的了解

钩子函数:

      1.bind: 此钩子函数只会被调用一次,可以定义一个在绑定时执行一次的初始化动作

      2.inserted: 当被绑定的元素插入到父元素中是低调用(此处的父元素不局限于document中)

      3.update: 不论被绑定的值是否发生了变化,在末班更新时都会被调用,

      4.componentUpdated:被绑定的元素在模板完成一次更新周期时调用,

      5.unbind: 只调用一次,元素解绑时调用

参数: 

      1.el: 指令所绑定的DOM元素,可以直接用来操作DOM

       2.binding: 一个对象,包含以下属性

             name: 指令的名称

             value: 指令绑定的值

             oldValue: 指令绑定前一个值

             expression: 绑定值的字符串形式

             arg: 传给指令的参数

             modifiers: 这是一个包含修饰符的对象

 

代码演示: 

 

输出结果

 

推荐阅读