vue自定义指令directive

先看下官方文档怎么解释：

vue2.0中，代码的复用和抽象主要形式是组件，然而有些情况需要对普通对象进行dom操作时，可用自定义指令：

局部指令：

    <div id="app">
        <input type="text" v-focus>
    </div>
<script>
// 页面加载输入框自动获取焦点
let vm = new Vue({
    el:"#app",
    data:{},
    directives:{
        focus:{
            inserted(ele,bindings){
                ele.focus();
            }
        }
    }
})
</script>

上边代码：自定义指令focus写在directives（指令）里边，inserted是自定义指令中的钩子函数：

自定义指令中钩子函数：

     bind：每当指令绑定到元素上时，会立即执行bind函数，只执行一次，通常会在此钩子中进行初始化的操作；

     inserted：表示元素插入到dom时，执行inserted函数，只触发一次；

     update：当VNode更新时会执行updated，可触发多次；

      componentUpdate：每当组件和子组件被更新时触发；

      unbind：一旦指令被移除时触发。。。、

所以上边例子中 ele.focus() 不能放在bind中，因为指令虽然绑定到元素上了，但元素还未插入到dom中，也就是元素还在内存中，未渲染到页面，而inserted则表示元素加载到页面上了，此时focus才生效。。。

   在来一个元素拖拽的例子：

<div id="app">
   <div class="drag" v-drag>=</div>
</div>
<script>
//在来一个元素拖拽
let vm = new Vue({
	el: "#app",
	directives: {
		drag: {
		  inserted(el) {
			el.onmousedown = function(e) {
				let disX = e.clientX - el.offsetLeft;
				let disY = e.clientY - el.offsetTop;
				document.onmousemove = function(e) {
				    el.style.top = e.clientY - disY + "px";
				    el.style.left = e.clientX - disX + "px";
				};
				el.onmouseup = function() {
				    el.onmousedown = document.onmousemove = null;
				};
				return false;
			};
		  },
		   update() {}
		}
	}
});
</sript>