vue 自定义指令

Vue.js 提供了自定义指令的功能，可以用来封装常用的 DOM 操作或者添加特定的行为。自定义指令分为全局指令和局部指令两种。 ## 全局指令 在 Vue 实例化之前定义一个全局指令，这个指令可以在任何 Vue 实例中使用。 ```js // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } }) ``` 在上面的例子中，我们定义了一个名为 `v-focus` 的全局指令，用于将元素聚焦。这个指令的定义包含 `inserted` 钩子函数，它会在绑定元素插入到父节点时调用。 接下来，在模板中使用这个指令： ```html <input v-focus> ``` 这样，当这个输入框被插入到页面中时，它会自动获取焦点。 ## 局部指令 局部指令只能在当前组件中使用，它的定义方式与全局指令有所不同。 ```js Vue.component('my-component', { template: '<input v-model="message" v-focus>', directives: { focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) ``` 在上面的例子中，我们在组件的选项中定义了一个局部指令 `v-focus`，它的定义方式与全局指令相同，只不过是在 `directives` 选项中定义而已。 接下来，在模板中使用这个指令： ```html <my-component></my-component> ``` 这样，当 `my-component` 组件被插入到页面中时，它的输入框元素会自动获取焦点。 以上就是 Vue.js 自定义指令的基本用法。需要注意的是，指令的钩子函数可以有多个，每个钩子函数都有特定的用途，具体可以参考 Vue.js 的官方文档。

### Vue.js 中自定义指令的使用 #### 注册全局指令 为了在整个应用程序中使用自定义指令，可以在 `main.js` 或者其他入口文件中通过 `Vue.directive()` 方法来注册全局指令[^2]。 ```javascript import Vue from 'vue'; import directive from './utils/directive'; // 自定义指令模块路径可能不同 // 使用插件形式注册全部自定义指令 Vue.use(directive); ``` 或者逐个导入并注册： ```javascript import Vue from 'vue'; import directives from './directives'; Object.keys(directives).forEach((name) => { Vue.directive(name, directives[name]); }); ``` 这种方式使得任何组件都可以访问这些已注册过的指令而无需再次声明。 #### 定义局部指令 如果只需要某个特定组件内部使用的指令，则可以直接在这个组件选项里添加 `directives` 字段来进行局部注册[^5]。 ```javascript export default { name: 'MyComponent', directives: { focus: { inserted(el) { el.focus(); } }, // 更多局部指令... }, }; ``` #### 创建简单的自定义指令 当创建一个新的自定义指令时，可以指定多个生命周期钩子函数。下面是一个例子展示了如何创建一个名为 `v-runoob` 的简单指令用于修改元素的内容及其样式[^3]。 ```html <div id="app"> <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div> </div> <script> new Vue({ el: '#app' }); Vue.directive('runoob', function (el, binding) { el.innerHTML = binding.value.text; el.style.backgroundColor = binding.value.color; }); </script> ``` 此代码片段中的 `binding` 参数包含了传递给该指令的数据对象 `{color:'green',text:'菜鸟教程!'}` ，并通过它设置了目标 DOM 节点 (`el`) 的 HTML 和 CSS 属性。 #### 高级特性支持 除了基本功能外，还可以利用更复杂的钩子方法如 `bind`, `inserted`, `update`, `componentUpdated`, 及 `unbind` 来实现更加灵活的行为控制[^1]。例如，在更新周期的不同阶段执行不同的逻辑操作；处理旧节点(`prevVnode`)的信息等。