什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊属性。 它可以写在DOM元素上，对html进行操作。常用的指令比如有：v-if，v-else，v-show，v-for等。这些都是官方直接给定的，另外Vue也允许注册自定义指令，有时这很有用。
自定义指令方法
自定义一个指令很简单,官网给出一个简单的例子，自定义一个聚焦指令v-focus：
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
上面几行代码就全局注册了一个指令并可以执行，当给一个输入框加上这个指令时，页面加载就会使该框获得焦点。
<input v-focus>
说明：
'focus'：如你所见，是指令的名称，不带v-前缀；
inserted：这是一个钩子函数，表示被绑定元素插入父节点时调用，指令定义函数提供了多个钩子函数，下面再介绍。
另外，你也可以局部注册指令，组件中也接受一个 directives 的选项：
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
钩子函数介绍
指令定义函数提供了几个钩子函数（可选）
-
bind：只调用一次，指令第一次绑定到元素时调用。 -
inserted：被绑定元素插入父节点时调用。 -
update：所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
他们中每一个都有相同的三个参数：el，binding和vnode，在update和componentUpdated中，还会有参数oldVnode，以区分传递的旧值和新值。
-
el：指令所绑定的元素，可以用来直接操作 DOM 。 -
binding：一个对象，包含以下属性：name，value，oldValue，expression，arg和modifiers。 -
vnode：Vue 编译生成的虚拟节点。 -
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
注意：除了 el 之外，其它参数都应该是只读的。
其中，你注意到binding参数中有多个属性，要搞清楚他们分别代表了什么，这很重要。
<div id="app"> <p v-demo:foo.a.b="message"></p> </div>
Vue.directive('demo',{
bind(el, binding, vnode){
//给绑定的元素添加内容
el.innerHTML = `
name:${binding.name};<br>
value:${binding.value};<br>
expression:${binding.expression};<br>
argument:${binding.arg};<br>
modifiers:${JSON.stringify(binding.modifiers)};
`
}
});
new Vue({
el:'#app',
data:{
message:"hello"
}
});
结果：
name:demo; //指令名，不包括 v- 前缀 value:hello; //指令的绑定值 expression:message; //字符串形式的指令表达式 argument:foo; //传给指令的参数，可选。 modifiers:{"a":true,"b":true}; //一个包含修饰符的对象。
还有一个oldValue是指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
到这里，你可能有点糊涂了，东西看起来有点多，其实并不是，你只是不熟悉。这些官网介绍的很清楚，你需要的是一个更具体的例子。
写一个自己的指令
现在来创建一个自定义指令，比如我想创建一个可以操作定位的指令，就叫他 v-position。
Vue.directive('position',{
bind(el, binding, vnode){
el.style.position = 'fixed';
el.style.top = binding.value + 'px';
}
});
<div id="app"> <p v-position='100'>我距离顶部100px</p> </div>
现在v-position只能控制到顶部的距离，我们还可以自由控制方向：
<p v-position:left='50'>我距离左侧50px</p>
Vue.directive('position',{
bind(el, binding, vnode){
el.style.position = 'fixed';
let d = (binding.arg == 'top'?'top':'left');
el.style[d] = binding.value + 'px';
}
});
另外，你还可以控制多个值：
<p v-position="{top:'100',left:'50'}">我距离左侧50px，距离顶部100px</p>
Vue.directive('position',{
bind(el, binding, vnode){
el.style.position = 'fixed';
el.style.top = binding.value.top + 'px';
el.style.left = binding.value.left + 'px';
}
});
这就是vue自定义指令的一些简单应用，你可以创建出更高级灵活的自定义指令。