vue自定义指令

1.Vue自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue允许我们注册自定义指令用于元素上。

当我们需要对普通 DOM 元素进行底层操作时，就可以用到用到自定义指令。

2. 钩子函数：

配置对象中包含一下几个钩子函数(均为可选值):

钩子函数 描述

• bind： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted(常用)： 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update： 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated： 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind： 只调用一次，指令与元素解绑时调用。

3. 钩子函数参数：

指令钩子函数会被传入以下参数：

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

• binding：一个对象，包含以下 property：

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

  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

  • expression：字符串形式的指令表达式。例如 v-my-

    directive="1 + 1" 中，表达式为 "1 + 1"。

  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue 编译生成的虚拟节点(这个参数本人没有用过，有用过的大佬请指点一下)

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

4.全局注册

全局注册自定义指令是将我们的自定义指令挂载到vue实例上的，在项目中都可以使用。

• 全局指令注册方法为：Vue.directive(dName, options) 传入两个参数
• 分别是 指令名 和 配置对象
• 创建完之后，我们就可以使用 v-指令名 的方式加在元素上，以使自定义指令生效

4.1使 input 进入获取焦点

import Vue from 'vue'
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

• 使用

<input v-focus />

5.局部注册

用法与 全局 注册是一样的， 只是写法稍有不同

进行局部注册时， 我们的组件中可以接收一个directives选项，

其中，键为指令名 值为配置对象

• 注册

export default{
  data(){
    return { ... }
  },
  directives:{
        focus:{
        inserted: function (el) {
          //element-ui中 el-input外层是div, 里面包裹的才是input, 因此用在 el-input上的话，要让el-input里的子元素聚焦
          //增加判断可以使我们的v-focus通用性更强
          el.tagName == 'INPUT' ? el.focus() : el.children[0].focus
        }
      }
  }
}

• 使用

<input v-focus></input>

6.项目用到的自定义指令

6.1 防抖函数：

点击按钮过快可能多次请求接口，用自定义指令做全局的函数防抖

• 在main.js中 全局注册一个自定义指令：

/**防抖函数
 * @el ：指令所绑定的元素，可以用来直接操作 DOM。
 * @binding :绑定的事件或者值
 */
Vue.directive('debounce', {
  inserted(el, binding) {
    let timer = null
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value();
        timer = null;
      }, 500)
    })
  }
})

• 使用

<button v-debounce="send">发送</button>

6.2节流函数

触发高频事件后，n秒内函数函数只会执行一次。

应用场景： search搜索联想，用户在不断输入值时

• 在main.js中 全局注册一个自定义指令

/**节流函数
 * @el ：指令所绑定的元素，可以用来直接操作 DOM。
 * @binding :绑定的事件或者值
 */
Vue.directive('throttle', {
  inserted(el, binding) {
    let timer = null
    el.addEventListener('change', () => {
      if (!timer) {
        timer = setTimeout(() => {
          clearTimeout(timer)
          binding.value();
          timer = null;
        }, 100)
      }
    })

  }
})

• 使用

<input v-throttle="changeSearch" />