vue 自定义指令（directive）实例

二、自定义指令详解

钩子函数：

directive.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

/**   * 自定义指令   */ 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

/**   * 自定义指令   */ 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<!-- 自定义指令 --> <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>

效果图：