一、自定义指令是用来操作dom的，尽管vue推崇数据驱动试图的理念，但并非所又情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的‘
比如谷歌图片的加载做的非常优雅，在图片未完成加载前，用随机的背景色占位背景图片加载晚成后才直接渲染出来。用自定义只能怪可以非常方便的实现这个功能。
//Vue.directive(指令名，指令要做的操作) Vue.directive("img",{ inserted:function(el,binding){ var color=Math.floor(Math.random()*1000); el.style.bagckgroundColor="#"+color; var img=new Image(); img.src=binding.value;//获取传给指令的值 img.onload=function(){ el.style.bagkgroundImage='url('+bingding.value+')' } } } )
自定义指令的第二用处是用于集成第三方插件。在前端开发领域，以前的通用框架是jQuery,jQuery以及基于jQuery的通用组件形成了一个庞大的生产系统。现在的通用框架是vue等，每个框架都需要基于自身构建新的组件库。自定义指令好就好在：原先的那些通用的组件，无论是纯js的也好，基于jQuery的也好，都可以直接拿来吸收，不需要改造或重构。比如写文档通常会用到的highlight.js，我们可以直接将其封装为一个自定义指令。
二、vue自定义指令包括4部分：指令名称、参数、修饰符、表达式
v-dire:arg.e="expression"
指令名称:参数.修饰符="表达式"
三、自定义指令有全局注册指令、局部注册指令。全局注册指令又分函数注册形式、对象注册形式。
全局注册指令，使用Vue的directive函数实现
//函数注册形式示例: Vue.directive('dire',function(el,bindings,vnode){ console.log("自定义指令"); }); 参数说明： dire 指令名称 el 当前绑定的dom元素 bindings 指令解析后的结果，包括指令名称、参数、表达式等，bindings.vaule返回的是表达式 vnode 对应的虚拟dom 对象注册形式示例: Vue.directive('dire',{ bind:function(el,bindings,vnode){ console.log("bind--最先执行的钩子函数"); }, inserted:function(el,bindings,vnode){ console.log("inserted--在bind后面执行"); }, update:function(el,bindings,vnode){ console.log("update--绑定组件更新前触发执行"); }, componentUpdated:function(el,bindings,vnode){ console.log("componentUpdated--绑定组件更新后触发执行"); }, unbind:function(el,bindings,vnode){ console.log("componentUpdated--组件销毁前触发执行"); } }); 局部注册指令示例： var vm = new Vue({ el:'#app', data:{ x:0 }, directives:{ //指令局部注册 dire:{ //dire指令名称 bind:function(el,bindings,vnode){ console.log("bind--最先执行的钩子函数"); }, inserted:function(el,bindings,vnode){ console.log("inserted--在bind后面执行"); }, update:function(el,bindings,vnode){ console.log("update--绑定组件更新前触发执行"); }, componentUpdated:function(el,bindings,vnode){ console.log("componentUpdated--绑定组件更新后触发执行"); }, unbind:function(el,bindings,vnode){ console.log("componentUpdated--组件销毁前触发执行"); } } } });