Vue自定义指令

除了核心指令（v-model和v-for）等外，Vue也允许我们自定义指令。

    <div id="box">
        <span v-text="msg"></span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            data:{
                msg:'hello',
            },
        }).$mount('#box');
    </script>
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

这里的v-text也是默认的指令，是用来输出msg的，等同于直接写{{msg}}。

需求：我们现在来自定义一个指令v-red，来修改HTML元素的背景色为红色:

    <div id="box">
        <span v-text="msg"></span>
        <span v-red>welcome</span>
    </div>
    <script type="text/javascript">
        Vue.directive('red',{
            inserted:function(el){
                el.style.background = 'red';
            }
        });

        var vm = new Vue({
            data:{
                msg:'hello',
            },
        }).$mount('#box'); 
    </script>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 
注意我们定义的指令名是red，但在使用的是是v-red，这是Vue的规范。

下面我们在定义一个指令v-drag，来实现HTML元素的拖拽

        Vue.directive('drag',{
            inserted:function(el){
                var oDiv = el;
                oDiv.onmousedown = function(ev){
                    var disX = ev.clientX - oDiv.offsetLeft;
                    var disY = ev.clientY - oDiv.offsetTop;
                    document.onmousemove = function(ev){
                        var l = ev.clientX - disX;
                        var t = ev.clientY - disY;
                        oDiv.style.left = l + 'px';
                        oDiv.style.top = t + 'px';      
                    };
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };  
                };
            }
        });

        var vm = new Vue({
            el:'#box',
        });
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

然后你可以在模板中DIV元素上使用v-drag属性：

<div :style="{width:'100px',height:'100px',background:'blue',position:'absolute',right :0,top:0}" v-drag>
</div>
 
 
1
2
 
 
1
2