Vue之指令详解与自定义指令

指令

想要了解自定义指令，那肯定得先明白什么是指令。

指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。

常见的Vue内置指令有：

• v-on 即 @。v-on:click=”function“， 缩写为@click=”function“
• v-if
• v-for
• v-html
• ……

所以指令就是跟我们的元素标签绑定在一起的某些事件，当我们dom组件在一定条件下就会触发相对应的指令。

自定义指令

先看看Vue官方的说法：

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

指令的自定义即我们按照Vue制定的规则去编写一套可以对dom进行操作的功能函数，然后就能与其他Vue的内置指令一样具有一定的功能效果。指令相当于简化了我们对dom的操作，可以快速进行dom的事件处理，当然我们应该尽量减少使用一些容易消耗浏览器资源的指令。

关于注册自定义指令

全局注册

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

局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

自定义指令的钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

封装自定义指令

通过以上的描述，相信大多数人大概对自定义指令以及指令都有了一定的理解，已经可以开始编写一些简单不重复的指令。但是面对一些复杂而且可能需要经常使用到的自定义指令，这个时候我们最好还是把代码进行一层封装，这样可以方便我们后续的修改和有层次的代码编写。

1.首先可以选择在根目录下新建文件夹directive

2.创建自定义指令的文件夹

3.文件夹下的index.js文件，例如实现一键复制文本内容，用于鼠标右键粘贴。

const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值为空的时候，给出提示。可根据项目UI仔细设计
        console.log('无复制内容')
        return
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('复制成功') // 可根据项目UI仔细设计
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
export default copy

4.directive下需要有一个总管全局directive的文件，便于我们进行全局注册时的操作。
directive/index.js

import copy from './copy'

// 自定义指令
const directives = {
  copy,
}
 
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },

5.全局进行遍历注册，main.js.Vue.use函数会调用我们写好的install，相当于运行我们install里面的代码

import Vue from 'vue'
import Directives from '@/directive'
Vue.use(Directives)