在Vue中自定义指令

偏执的太偏执、 2022-09-08 15:44 165阅读 0赞

Vue中指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。  
自定义指令的注册分为全局自定义指令和局部指令。

# 全局注册 #

Vue的静态方法directive，用于注册或获取全局指令。

Vue.directive("指令名字",options对象）

# 局部注册 #

在组件的选项中设置directives来注册局部自定义指令

new Vue({ 
        el:"#app",
        directives: { 
        指令名字: options对象
      }
    })

# 钩子函数 #

注册指令的options对象里提供如下几个钩子函数：

*  bind：指令第一次绑定到元素时调用,只调用一次。
 *  inserted：被绑定元素插入父节点时调用。
 *  update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
 *  componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 *  unbind：只调用一次，指令与元素解绑时调用。

<dl id="app">
        <dt>自定义指令</dt>
        <dd><input type="text" v-if="flag" v-model="num" v-test v-focus></dd>
        <dd>
            <button v-on:click="create">创建</button>
            <button v-on:click="update">更新</button>
            <button v-on:click="destory">关闭</button>
        </dd>
    </dl>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script> Vue.directive('focus', { inserted: function (el) { el.focus() } }) new Vue({ el: '#app', data: { flag: false, num: 0 }, directives: { 'test': { bind: function (el) { console.dir('触发了bind钩子', el) }, inserted: function (el) { console.log('触发了inserted钩子', el.parentNode) }, update: function (el) { console.log('触发了update钩子', el.innerHTML) }, componentUpdated: function (el) { console.log('触发了componentUpdated钩子', el.innerHTML) }, unbind: function (el) { console.log('触发了unbind钩子', el) } } }, methods: { create () { console.log('=======创建========') this.flag = true }, update () { console.log('=======更新========') this.num++ }, destory () { console.log('=======销毁========') this.flag = false } } }) </script>

![在这里插入图片描述][20191204163226811.gif]

### 钩子函数参数 ###

在模板中使用指令语法如下：

v-指令名:参数.修饰符 ="指令的绑定值"

通过构造函数的参数，可以获取到绑定某指令的元素的dom,指令名，参数，修饰符及绑定值等信息。

##### el：指令所绑定的元素，可以用来直接操作 DOM #####

##### binding：一个包含如下属性的对象 #####

*  name 指令名。
 *  value 指令的绑定值
 *  oldValue 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
 *  expression 字符串形式的指令表达式。
 *  arg 传给指令的参数，
 *  modifiers 一个包含修饰符的对象。

##### vnode：Vue 编译生成的虚拟节点。 #####

##### oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用 #####

一个避免重复点击的例子

Vue.directive('preventReClick', { 
      inserted: function (el, binding) { 
        el.addEventListener('click', () => { 
          if (!el.disabled) { 
            el.disabled = true
            setTimeout(() => { 
              el.disabled = false
            }, binding.value || 300)
          }
        })
      }
    })

[20191204163226811.gif]: /images/20220829/8d78a6df44894d3baaf2c5379e1b7b63.png