Vue--自定义指令

<div id=‘app‘>
    <span v-red>vue</span>
</div>
<script src=‘../js/vue.js‘></script>
<script>
    Vue.directive(‘red‘, function(){
        this.el.style.color = ‘red‘;
    });
    new Vue({
        el : ‘#app‘
    });
</script>

<div id=‘app‘>
    <span v-set=‘{size : "40px", color : "blue"}‘>hello</span>
</div>
<script src=‘../js/vue.js‘></script>
<script>
    Vue.directive(‘set‘, function(json){
        this.el.style.fontSize = json.size;
        this.el.style.color = json.color;
    });
    new Vue({
        el : ‘#app‘
    });
</script>

<div id=‘app‘>
    <div class=‘box‘ v-drag></div>
</div>
<script src=‘../js/vue.js‘></script>
<script>
    Vue.directive(‘drag‘, function(){
        var div = this.el;
        div.onmousedown = function(e){
            disX = e.clientX - div.offsetLeft;
            disY = e.clientY - div.offsetTop;
            document.onmousemove = function(e){
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                div.style.left = l + ‘px‘;
                div.style.top = t + ‘px‘;
            }
            document.onmouseup = function(){
                document.onmousedown = document.onmousemove = null;
            }
        }    
    });
    new Vue({
        el : ‘#app‘
    });
</script>