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> |
效果图: