Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象

钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令

bind - 只调用一次,在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用,之后绑定值变化的时候,参数为新值与旧值
unbind - 只调用一次,在指令从元素上解绑的时候调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Vue.directive('my-directive',{
bind : function(){
//准备工作
//例如,添加事件处理器或只需要运行一次的高耗任务
},
update : function(){
//值更新时的工作
//也会以初始值为参数调用一次
},
unbind : function(){
//清理工作
//例如,删除bind()添加的事件监听器
}
})
//调用
<div v-my-directive="someValue"></div>
//只需要update函数,可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 如果指令需要多个值,可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>

当指令使用字面修饰符,值将按普通字符串处理并传递给update方法,update方法只调用一次,因为普通字符串不能影响数据变化

1
2
3
4
5
6
7
8
9
10
11
<body id="example">
<div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value); //foo bar baz
})
var demo = new Vue({
el : '#demo'
})
</script>

以属性的形式使用自定义属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body id="demo">
<my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
//api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
})
var demo = new Vue({
el : '#demo'
})
</script>
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
<body id="demo">
<my-directive class="hello" name="hi" a="params"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'],
//api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
})
var demo = new Vue({
el : '#demo'
})
</script>
<!-- 或者需要自动更新的时候,需要一个回调 -->
<body id="demo">
<my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive>
<input type="text" v-model="someValue">
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'],
paramWatchers : {
a : function(val,oldValue){
console.info('a changes');
}
}
})
var demo = new Vue({
el : '#demo',
data : {
someValue : 'value'
}
})
</script>

自定义属性用在对象上,对象内部属性变化的时候触发update,在指令定义对象中指定deep:true

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
<body id="demo">
<div v-my-directive="a"></div>
<button @click="change">change</button>{{a,b,c}}
</body>
<script>
Vue.directive('my-directive',function(){
deep : true,
update : function(obj){
//当obj的嵌套属性变化时候调用
console.info(obj.b.c);
}
})
var demoVM = new Vue({
el : '#demo',
data : {
a : {b : {c : 2}}
},
method : {
change : function(){
demoVM.a.b.c = 4;
}
}
})
</script>

acceptStatement让自定义指令接受内联语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body id="demo">
<div v-my-directive="a++"></div>
{{a}}
</body>
<script>
Vue.directive('my-directive',function(){
acceptStatement : true,
update : function(fn){
//当obj的嵌套属性变化时候调用
console.info(fn.toString())
fu();
}
})
var demoVM = new Vue({
el : '#demo',
data : {
a : 5
}
})
</script>

v-on绑定多个事件时,要是是不同的事件类型,例如点击,focus,change,会按照业务需求进行选择,要是绑定了2个甚至多个click事件,那么v-on只会绑定第一个click事件