VUE每日一学：Vue之常用的内置指令 - Web前端

Vue每日一学：Vue之常用的内置指令。

vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 dom 上，尽量不去操作增删改 DOM。通过了解如何去自定义指令，可以想象内置指令是如何完成的。

内置指令

自定义指令

在需要特殊功能时，使用自定义指令对 DOM 进行底层操作

注册

自定义指令的注册分为全局注册和局部注册，类似组件的注册，只是方法名为 directive，写法如下：

// 全局注册 自定义指令
VUE.directive(‘mydir',{
  // 指令选项
});
// 全局注册 自定义指令函数
Vue.directive('mydir', function () {
 // 这里将会被 `bind` 和 `update` 调用
})
// 局部注册（只针对组件内元素）
Export default {
  directives: {
    mydir: {
      // 指令选项
    }
  }
}

需要注意的是：Vue.directive( ) 注册指令要在实例初始化 new Vue( ) 之前才能全局注册指令。定义指令时驼峰式写法会报错，所以一般小写。

指令选项

自定义指令的选项是由几个钩子函数（可选）组成，可以根据需求选择不同的钩子，例如使用全局注册一个指令时：

Vue.directive('mydir', {
 bind: function () {
  // 只调用一次，指令第一次绑定到元素时调用，用于在绑定元素时执行一次的初始化动作。
  },
 upDate: function () {
  // 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，
  // 之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化，可以忽略不必要的模板更新。  
  }, 
 inserted: function () {
  // 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  },
 componentUpdated: function () {
  // 被绑定元素所在模板完成一次更新周期时调用。
  },
 unbind: function () {
  // 只调用一次， 指令与元素解绑时调用。
  }
})

以上每个钩子函数都有几个参数可用：

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

2. binding：包含指令信息的一个对象；

3. vnode：Vue 编译的生成虚拟节点；

4. oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

示例：

// 一个带自定义指令的元素
<div v-mytest:foo.m1.m2="1+1">MyDirective</div>

// 部分 JS 代码
export default {
  directives:{
   mytest: {
    bind: function (el, binding, vnode) {
     console.log(el)
     console.log(binding)
     console.log(vnode)
    }
   }
  }
}

标签：指令常用WebVueVUE