当我们使用 Vue 构建应用时,经常需要在模板中添加一些自定义的指令,来实现期望的功能,这些指令可以全局定义,也可以定义在组件内。
全局指令是指在应用的 main.js 文件或其他入口文件中注册的指令,可以在应用的任何组件中使用。定义全局指令只需要在 Vue 对象上调用 directive 方法,语法如下:
Vue.directive('directiveName', {
// 指令相关逻辑
})
其中 directiveName 是指令的名称,第二个参数是一个对象,其中包含了指令的配置选项,常用的钩子函数有 bind、inserted、update、componentUpdated 和 unbind,这些函数会在指令与元素绑定、插入到 DOM 中、数据更新、组件重新渲染和解绑等不同阶段触发。
例如,我们可以创建一个全局指令 v-focus,它在元素插入到 DOM 中后自动获得焦点:
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
然后在组件的模板中使用 v-focus 指令即可:
<input v-focus>