vue 自定义指令(directive)实例

2020年07月27日 阅读数:26
这篇文章主要向大家介绍vue 自定义指令(directive)实例,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

2、自定义指令详解javascript

钩子函数:vue

directive.jsjava

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' );
   }
})
/**
钩子函数
一、bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数能够定义一个绑定时执行一次的初始化动做。
二、inserted:被绑定元素插入父节点时调用(父节点存在便可调用,没必要存在于document中)。
三、update:被绑定于元素所在的模板更新时调用,而不管绑定值是否变化。经过比较更新先后的绑定值,能够忽略没必要要的模板更新。
四、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
五、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钩子函数中可用。
*/

 注:node

(1)页面加载时:bind insertedexpress

(2)更新组件:update componentUpdatedless

(3)卸载组件:unbindide

(4)从新安装组件:bind inserted函数

注意区别:bind与inserted:bind时父节点为null,inserted时父节点存在;update与componentUpdated:update是数据更新前,componentUpdated是数据更新后。spa

2.实例code

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

效果图: