自定义指令

vue中提供了很多指令如v-model，v-if，v-show，v-for， v-on，v-bind等等，但同时我们也可以根据需求设置自定义指令

改变按钮颜色的v-color指令
<div id="app">
    <button v-color="back">变色</button>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        directives: {
            color(el, bindings){ // el指代的是要操作的DOM
                el.style.background = bindings.value;
            }
        },
        el: '#app',
        data: {
            back: 'red'
        }
    });
</script>

拖拽div
<div id="app">
    <div v-drag class="box"></div>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        directives: {
            drag(el){
                el.onmousedown = function (e) {
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    document.onmousemove = function (e) {
                        el.style.marginLeft = (e.pageY-disx)+'px';
                        el.style.marginTop = (e.pageY-disy)+'px';
                    };
                    document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                    };
                    e.preventDefault();
                }
            }
        },
        el: '#app',
        data: {
            back: 'red'
        }
    });
</script>