Vue2-自定义指令

一、概念

自定义指令是自定义一些对底层DOM进行的操作

二、Vue中的内置指令

• v-text: 更新元素的textContent
• v-html: 更新元素的innerHTML

• v-show:切换元素的display属性
• v-if: 根据条件渲染元素

• v-else:同上。必须搭配 v-if 或 v-else-if 使用
• v-else-if: 同上。前一兄弟元素必须有 v-if 或 v-else-if。

• v-for: 基于源数据多次渲染元素或模板快
• v-on: 绑定事件监听器

• v-bind: 动态地绑定一个或多个attribute，或一个组件 prop 到表达式
• v-model:在表单控件或者组件上创建双向绑定

• v-slot: 提供具名插槽或需要接收prop的插槽
• v-pre: 跳过这个元素和它的子元素的编译过程

• v-cloak: 这个指令保持在元素上直到关联实例结束编译
• v-once: 之渲染元素和组件一次

三、指令的钩子函数

Vue官网解释

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

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

注意：

1. 除 update 与 componentYpdated 外，每个钩子函数都含有 el、binding、vnode 这三个参数。
2. 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个DOM元素，这个el参数，是一个原生的JS对象，所以Vue自定义指令可以用来直接和DOm打交道。

3. binding是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4. oldValue只有在update与componentUpdated钩子中生效

5. 除了el之外，binding、vnode属性都只是只读。

三、全局指令

在Vue项目中新建一个directives的文件夹，用来存储这个指令文件。

自定义复制指令

1. 在directives目录下新建copy.js，代码如下：

const copy = {
  bind (el, {value}) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值为空
        console.log('无复制内容')
        return
      }
      // 动态 创建textarea标签
      const textarea = document.createElement('textarea')
      // 为textarea设置readonly属性，防止唤起键盘
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要copy的值赋给textarea
      textarea.value = el.$value
      // 将textarea插入到body中
      document.body.appendChild(textarea)
      // 选中值 ，并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('复制成功')
      }
      document.body.removeChild(textarea)
    },
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新时触发
  componentUpdated (el, {value}) {
    el.$value = value
  },
  // 指令与元素解绑时，移除事件绑定
  unbind (el) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy

2. 在directives目录下，新建index.js，导出所有指令，代码如下：

// 引入指令
import copy from './copy.js'


// 自定义指令
const directives = {
  copy
}


export default {
  install (Vue) {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key])
    })
  }
}

3. 在main.js中全局注册，部分代码如下：

import Vue from 'vue'

import Directives from './directives/index'

Vue.use(Directives)

4. 在项目中引用：在Vue文件中，将v-copy绑定在元素属性中：

5. 点击“暂未备案”，则复制了【暂未备案】文字。

四、局部指令

自定义复制指令

1. 第一步骤同全局指令
2. 在页面中引入对应的指令文件

import copy from '../directives/copy'

3. 在Vue实例中引用

export default {
  directives: {
    copy
  }
}

4. 在DOM元素绑定指令