在Vue2.0中，代码复用和抽象的主要形式是组件。然鹅，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
1.举个聚焦输入框的例子，全局注册focus指令
Vue.directive(‘focus‘, { inserted: function (el) { el.focus() } })
在模板中任何元素上使用自定义的指令 v-focus属性，如下：
<input v-focus />
当页面加载时，该元素将获得焦点（注意：autofocus在移动版Safari上不工作）
2.自定义指令的各种钩子函数
3.钩子函数参数
4.完整的自定义指令样例：
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive(‘demo‘, { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = ‘name: ‘ + s(binding.name) + ‘<br>‘ + ‘value: ‘ + s(binding.value) + ‘<br>‘ + ‘expression: ‘ + s(binding.expression) + ‘<br>‘ + ‘argument: ‘ + s(binding.arg) + ‘<br>‘ + ‘modifiers: ‘ + s(binding.modifiers) + ‘<br>‘ + ‘vnode keys: ‘ + Object.keys(vnode).join(‘, ‘) } }) new Vue({ el: ‘#hook-arguments-example‘, data: { message: ‘hello!‘ } })
（完）
参考：Vue官方文档——自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
原文：https://www.cnblogs.com/cathy1024/p/10882871.html