vue 自定义指令（directive）实例

一、内置指令

1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  v-bind:bb

2、v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup

3、v-model：数据双向绑定；用于表单输入等；例如：<input v-model="message">

4、v-show：条件渲染指令，为DOM设置css的style属性

5、v-if：条件渲染指令，动态在DOM内添加或删除DOM元素

6、v-else：条件渲染指令，必须跟v-if成对使用

7、v-for：循环指令；例如：<li v-for="(item,index) in todos"></li>

8、v-else-if：判断多层条件，必须跟v-if成对使用；

9、v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同于 <span>{{msg}}</span>；

10、v-html：更新元素的innerHTML；

11、v-pre：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；例如：<span v-pre>{{ this will not be compiled }}</span>；

12、v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译；

13、v-once：不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。

二、自定义指令详解

钩子函数：

directive.js

/**
 * 自定义指令
 */
import Vue from 'vue'

/**
 * 模板
 * v-lang
 * 五个注册指令的钩子函数
 */
Vue.directive('lang', {
  /**
   * 1.被绑定
   * 做绑定的准备工作
   * 比如添加事件监听器，或是其他只需要执行一次的复杂操作
   */
  bind: function(el, binding, vnode) {
    console.log('1 - bind');
  },
  // 2.绑定到节点
  inserted: function(el, binding, vnode) {
    console.log('2 - inserted');
  },
  /**
   * 3.组件更新
   * 根据获得的新值执行对应的更新
   * 对于初始值也会调用一次
   */
  update: function(el, binding, vnode, oldVnode) {
    console.log('3 - update');
  },
  // 4.组件更新完成
  componentUpdated: function(el, binding, vnode, oldVnode) {
    console.log('4 - componentUpdated');
  },
  /**
   * 5.解绑
   * 做清理操作
   * 比如移除bind时绑定的事件监听器
   */
  unbind: function(el, binding, vnode) {
    console.log('5 - bind');
  }
})
/**
钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
*/

/**
钩子函数的参数：(el, binding, vnode, oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性
  name：指令名，不包含v-的前缀；
  value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；
  oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
  expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；
  arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；
  modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}
vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
*/

注：

（1）页面加载时：bind inserted

（2）更新组件：update componentUpdated

（3）卸载组件：unbind

（4）重新安装组件：bind inserted

注意区别：bind与inserted：bind时父节点为null，inserted时父节点存在；update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

2.实例

自定义指令  v-check

directive.js

/**
 * 自定义指令
 */
import Vue from 'vue'

/**
 * 聚集焦点
 */
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})

/**
 * 钩子函数 bind update
 * 表单验证
 * v-check="{type:'date',val:currentDate}"
 */
Vue.directive('check', {
  // 被绑定
  bind: function(){
    // 仅首次调用
    console.log('指定绑定成功');
  },
  // 组件更新
  update: function(el, binding){
    // 获取当前的值
    // console.log(binding.value);
    // 进行判断,避免同时触发多个判断
    if(binding.oldValue.val != binding.value.val){
      // 定义验证状态 局部变量
      let checkStatus = true;
      if(binding.value.type == 'phone'){
        // 验证手机号码
        if(!/^1(3|4|5|7|8)\d{9}$/g.test(binding.value.val)){
          checkStatus = false;
        }
      }else if(binding.value.type == 'date'){
        // 验证日期
        if(!/^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/g.test(binding.value.val)){
          checkStatus = false;
        }
      }else if(binding.value.type == 'identification_card'){
        // 验证身份证
        if(!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(binding.value.val)){
          checkStatus = false;
        }
      }else if(binding.value.type == 'email'){
        // 验证邮箱
        if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/g.test(binding.value.val)){
          checkStatus = false;
        }
      }else if(binding.value.type == 'zip_code'){
        // 验证邮编
        if(!/^\d{6}$/g.test(binding.value.val)){
          checkStatus = false;
        }
      }

      // checkStatus true 成功 false 失败
      if(checkStatus){
        el.style.border = "1px solid #ccc";
      }else{
        el.style.border = "1px solid red";
      }
    }
  }
})

调用：

test.vue

<!-- 自定义指令 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="自定义指令">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 内容 -->
    <div>
      <input type="text" v-check="{type:'phone',val:currentPhone}" placeholder="请输入手机号码" v-model="currentPhone" />
      <input type="text" v-check="{type:'date',val:currentDate}" placeholder="请输入日期" v-model="currentDate" />
      <input type="text" v-check="{type:'identification_card',val:currentIdentificationCard}" placeholder="请输入身份证" v-model="currentIdentificationCard" />
      <input type="text" v-check="{type:'email',val:currentEmail}" placeholder="请输入邮箱" v-model="currentEmail" />
      <input type="text" v-check="{type:'zip_code',val:currentZipCode}" placeholder="请输入邮编" v-model="currentZipCode" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Directive',
    data(){
      return {
        currentPhone: '',
        currentDate: '',
        currentIdentificationCard: '',
        currentEmail: '',
        currentZipCode: '',
      }
    },
  }
</script>

<style lang="less" scoped>
  // 输入框
  input[type="text"]{
    display: block;
    width: 90%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-indent: 1em;
    margin: 5px auto;
    outline: none; // 清除input默认样式
    border: 1px solid #ccc;
  }
  // 按钮
  input[type="button"]{
    display: block;
    width: 70%;
    height: 40px;
    margin: 10px auto;
  }
</style>

效果图：