自定义指令

1.v-text指令

<!--这里的v-text也是默认的指令，是用来输出msg的，等同于直接写{{msg}}。-->
<div id="box">
    <span v-text="msg"></span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        data:{
            msg:'hello',
        },
    }).$mount('#box');
</script>

2.自定义指令

<!--我们现在来自定义一个指令v-red，来修改HTML元素的背景色为红色,以及字体加粗，设置字体大小-->
<div id="box2">
    <span v-red="msg">welcome</span>
</div>

<script type="text/javascript">
    /*注意我们定义的指令名是red，但在使用的是是v-red，这是Vue的规范。*/
    Vue.directive('red',{
        inserted:function(el){
            el.style.background = 'red';
            el.style.fontWeight = 'bolder';
            el.style.fontSize ='30px';
        }
    });

    var vm = new Vue({
        data:{
            msg:'hello,world',
        },
    }).$mount('#box2');
    </script>

3.自定义指令实现拖拽

div id="box3" :style="{width:'100px',height:'100px',background:'blue',position:'absolute',right :0,top:0}" v-drag></div>
<script>
    /*下面我们在定义一个指令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 vm3 = new Vue({
        el:'#box3',
    });
</script>