二、自定义指令详解
钩子函数:
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>
|
效果图: