Vue自定义指令的概念及使用。

Vue自定义指令：directive

在Vue中，除了默认设置的核心指令（v-model和v-show）,Vue也允许自定义指令directive.

自定义指令分为全局自定义指令和局部自定义指令。

全局自定义指令：

使用Vue.directive来全局注册指令。

Vue.directive('focus', {
 		// 当绑定元素插入到 DOM 中。
		inserted: function (el) {
  		// 聚焦元素
 		 el.focus()
	   }
	})

局部自定义指令：

在组件或者Vue构造函数中接收一个directives的选项，来注册局部指令。

 directives: {
 		 // 注册一个局部的自定义指令 v-focus
		focus: {
  			// 指令的定义
     		inserted: function (el) {
        	// 聚焦元素
       		 el.focus()
    		}
		 }
	  }

自定义指令的钩子函数：

指令定义函数提供了几个钩子函数：

• bind：绑定元素的时候调用
• inserted：绑定的元素插入父节点时调用
• Updata：绑定元素的值改变之前调用
• componentupdata:绑定的元素改变之后调用
• unbind: 解绑元素的时候调用

钩子函数函数：

• el:绑定的元素，用来操作DOM
• binding:绑定的对象信息，包含以下属性。
  • name : 指令的名字
  • value : 指令的值
  • oldValue: 指令绑定的前一个值，仅在update和 componentUpdated钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

使用Vue自定义指令封装一个拖拽的盒子

Vue.directive("drag", {                     //指令的名称
    inserted: function (el, binding) {      //当被绑定的元素插入到 DOM 中时
        el.style.position = "absolute";
        el.style.left = binding.arg.left + "px";
        el.style.top = binding.arg.top + "px";
        el.onmousedown = function (e) {
            var x = e.offsetX;
            var y = e.offsetY;
            document.onmousemove = function (eve) {
                el.style.left = eve.clientX - x + "px";
                el.style.top = eve.clientY - y + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
}