ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue.js 中的指令（Vue自界说指令） [打印本页]

作者: 惊落一身雪 时间: 2024-8-20 03:14
标题: Vue.js 中的指令（Vue自界说指令）
Vue.js 中的指令作用

在 Vue.js[1] 中，指令是个非常告急的概念，它可以用来扩展 Vue.js 的功能，提供了丰富的指令来简化开发者的工作。本文将对除了内置指令外，Vue.js 还支持自界说指令，开发者可以根据本身的需求扩展 Vue.js 的指令库。Vue.js 3.x 相较于 Vue.js 2.x 在自界说指令方面进行了一些改进，本文将先容 Vue.js 3.x 中自界说指令的使用方法。
什么是自界说指令

1. 概念先容

在 Vue.js 中，指令 (Directives) 是一种带有 v- 前缀的特殊属性。它的作用是「当其绑定的元素被插入到 DOM 中时，会立即执行一些行为」。 Vue.js 中有许多内置指令，比如:

v-model：在表单元素上创建「双向数据绑定」；
v-show：根据表达式之真假值，「切换元素的 display CSS 属性」；
v-if：根据表达式之真假值「渲染或销毁元素」；
v-for：基于一个数组来渲染一个列表。

这些指令让我们可以更加声明式地使用 DOM，隐蔽复杂的 DOM 操控逻辑。除了内置的指令，Vue.js 也答应我们注册自界说指令[2]。自界说指令「答应我们在渲染的 DOM 元素上应用自界说的行为」。
基础使用

以全局自界说指令为例，通过全局方法 app.directive(name, options) 进行注册，并使用 v- 前缀在模板中应用。directive() 方法接收两个参数:

name：指令名称，如 focus；
options：指令配置对象，其中包罗「指令的钩子函数」。

下面以自界说指令 v-focus作为示例先容，起首创建 v-focus指令：

const app = createApp({});
app.directive("focus", {
// 当绑定元素插入到 DOM 中时......
mounted(el) {
// 聚焦元素
el.focus();
},
});

复制代码

然后在模板中使用：

<input v-focus />

复制代码

当输入框挂载到 DOM 时，它将自动得到焦点。一个自界说指令界说对象可以提供以下「钩子函数」：

const myDirective = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {},
};

复制代码

每个钩子函数的参数包括：

el：指令绑定到的元素。可以用于直接使用 DOM。
binding：一个对象，包罗value、oldValue、arg、modifiers、instance、dir属性。
vnode：代表绑定元素的底层 VNode。
prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

参数的详细先容，可以查察文档《Hook Arguments[3]》。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)