Vue.js 是一个流行的前端框架，其强大的数据绑定能力和组件化开发极大地提高了前端开发的效率。除了 Vue.js 提供的内置指令，我们也可以自定义指令来满足特定的需求。
自定义指令的基本用法
Vue.js 中自定义指令的方法其实非常简单，我们可以通过 Vue.directive() 方法来定义一个指令，然后在 HTML 模板中使用它。
定义指令
Vue.directive() 接收两个参数：指令名称和一个指令定义对象。指令定义对象中可以包含以下几个钩子函数：
bind(el, binding, vnode)：指令第一次绑定到元素时调用inserted(el, binding, vnode)：被绑定的元素插入到父元素时调用update(el, binding, vnode)：被绑定的元素所在的模板更新时调用componentUpdated(el, binding, vnode)：被绑定的元素所在模板完成一次更新周期时调用unbind(el, binding, vnode)：指令与元素解绑时调用
以 v-highlight 指令为例，定义如下：
Vue.directive('highlight', {
bind: function(el, binding, vnode) {
el.style.backgroundColor = binding.value;
}
});在绑定该指令的元素上添加 v-highlight 属性，同时将所需的参数作为该属性值传入。
使用指令
在 HTML 模板中以 v- 开头的自定义指令都会被解析成 Vue.js 识别的指令。在模板中使用 v-highlight 直接将需要高亮的颜色作为参数传入即可。
<div v-highlight="'#ffff00'">高亮文本</div>
自定义指令的高级用法
除了基本用法外，Vue.js 的自定义指令还有更高级的用法，下面将介绍其中的两种。
拖拽指令
拖拽指令是一种非常有用的自定义指令，能够让元素具有拖拽功能。我们可以通过 v-draggable 指令实现拖拽，具体实现代码如下：
-- -------------------- ---- -------
-------------------------- -
----- ------------ -------- ------ -
--- -- - -- -- - --
-------------------------------- --------------- -
-- -----------
-- - ------------- - --------------
-- - ------------- - -------------
-------------------------------------- ------
------------------------------------ ----------
---
-------- ----------- -
-- --------
--- - - ------------- - ---
--- - - ------------- - ---
------------- - - - -----
------------ - - - -----
-
-------- ---------- -
----------------------------------------- ------
--------------------------------------- ----------
-
-
---在模板中使用 v-draggable 属性即可拥有拖拽功能。
<div v-draggable>可以拖拽的元素</div>
自动聚焦指令
在页面中有些表单需要自动获取焦点，可以通过自定义指令来实现。
Vue.directive('focus', {
inserted: function(el) {
el.focus();
}
});在模板中使用 v-focus 指令即可让指定的表单元素在页面渲染完成后自动获得焦点。
<input type="text" v-focus>
总结
本文介绍了 Vue.js 中自定义指令的基本用法以及高级用法，包括拖拽指令和自动聚焦指令。自定义指令能够极大地简化前端开发中的一些常见操作，帮助开发者提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451f8b7675af4061b5ae85a