vue自定义指令

vue自定义指令——Vue.directive、bind()函数、参数binding对象的用法

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。Vue2.0 中，代码复用和抽象的主要形式是组件。

在使用自定义指令时，需要加上 v- 前缀。

自定义指令（官网）——https://cn.vuejs.org/v2/guide/custom-directive.html

自定义指令（菜鸟教程）——https://www.runoob.com/vue2/vue-custom-directive.html

directive 用法源码（注册自定义指令）——https://www.jianshu.com/p/9db893296943

1、基本介绍

1.1、注册全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

官网版

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

详细版

Vue.directive('focus', { // focus 自定义指令名称
       bind: function(el) { //表示当指令绑定到元素身上时会执行bind函数，只执行一次
       //el代表被绑定指令的哪个元素，且函数中的第一个参数都为el.el是一个原生的js对象，里面有些元素的dom方法
       // 绑定到元素身上时，数据尚在内存中，无法在页面中显示，所以el.focus()没有效果，而console.log('你好呀')可以显示
       el.focus()
       console.log('你好呀')
    },
     inserted: function(el) { //表示元素插入dom中的时候回执行inserted函数，只触发一次
       el.focus()
      },
    updated: function() { //当vNode更新的时候回执行updated函数，可以会触发多次
          }
 })

1.2、注册局部自定义指令

官网版

// 注册一个局部自定义指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

示例

• 在声明自定义指令时，可以通过形参中的第二个参数binding，来接收指令的参数值。

• bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。

• update 函数会在每次 DOM 更新时被调用。

directives: { //定义私有指令
  // 定义名为 color 的指令，指向一个配置对象
  'color': {
     // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
     // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象  
     bind: function(el, binding) {
        el.style.color = binding.value
     },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }     
  }
}

如果 bind和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

directives: {
 color(el, binding) {
      el.style.color = binding.value
  }
}

1.3、调用方式

• 在使用自定义指令时，需要加上 v- 前缀。

• 在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值。

示例代码如下：

<input type="text" v-focus v-color="'blue'">

等价于
<h1 v-color="color">App 根组件</h1>
<script>
    data() {
        return {
            color: 'blue'
        }
    }
</script>

2、钩子函数

作用——当使用自定义指令时触发的回调函数

2.1、函数种类

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

注意

一般初始化元素属性用bind，使用js的方法，应该用inserted和updated

2.2、函数参数

自定义指令参数

基本结构

// 自定义指令函数  基本写法
Vue.directive('自定义指令名称', {  
     bind(el, binding, vnode, oldVnode) {
  	console.log("此处为逻辑代码")
     }
})

3、完整示例

第一步：定义自定义指令文件

src/components/common/demo.js

import Vue from 'vue';

// 注册一个全局自定义指令 `v-focus`  自定义指令函数——基本写法
Vue.directive('focus', {  // focus 自定义指令名称
     bind(el, binding, vnode, oldVnode) {  // vnode, oldVnode——定义了，可以不使用
  	console.log("此处为逻辑代码")
     }
})

第二步：在main.js中进行引入

src/main.js

// 全局使用 自定义指令
import '@/components/common/dialogDrag.js';

第三步：在页面中进行使用

index.vue

<input type="text" v-focus>