企业官网建设流程全解析

1.注册

（1）全局自定义指令

在main.js中使用app.directive()进行注册，其语法为app.directive(自定义指令名称,{钩子函数(节点，绑定对象){逻辑操作})

const app = Vue.createApp({}) // 注册一个全局自定义指令 `v-focus` app.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… mounted(el) { // 聚焦元素 el.focus() } })

（2）局部自定义指令

组合式Api中，在<script setup>中，任何以v开头的驼峰式变量，都会被自动识别为局部自定义指令。模板中使用时，将驼峰转为短横线并加上v-前缀。

<script setup> // 变量名必须以 v 开头，驼峰式 const vFocus = { mounted(el) { el.focus() } } </script> <template> <input v-focus placeholder="自动聚焦" /> </template>

选项式Api中，在组件的directives选项中注册，语法为directives: { 指令名称：{ 钩子函数: function (Dom节点, 绑定对象, 虚拟节点, 上一个虚拟节点) { 逻辑操作 }} }。

<template> <el-input v-model="kanno.name" v-focus /> <template/> export default { name: 'kanno', directives: { focus: { // 指令的定义 inserted: function (el) { el.focus(); // 获取焦点 } } }, data() { return { kanno: 'kanno', }; }, methods: {}, mounted() { console.log('kanno mounted'); }, };

2.钩子函数

指令定义对象可以提供的钩子函数（均为可选）：

• created：新增。在绑定元素的属性或事件监听器被应用之前调用。

• beforeMount：指令第一次绑定到元素并且在挂载父组件之前调用

• mounted：在绑定元素的父组件被挂载后调用

• beforeUpdate：新增。在更新包含组件的 VNode 之前调用。

• updated：在包含组件的VNode 及其子组件的 VNode 更新后调用

• beforeUnmount：新增。在绑定元素的父组件卸载之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时调用

3.钩子函数参数

• 钩子函数的参数与 Vue 2 类似，主要有el和binding。

  • el：指令绑定的 DOM 元素。

  • binding：一个对象，包含：

    • instance：使用指令的组件实例（Vue 3 新增，用于访问组件上下文，替代 Vue 2 中的vnode.context）。

    • value：传递给指令的值。

    • oldValue：先前的值，仅在beforeUpdate和updated中可用。

    • arg：传递给指令的参数。

    • modifiers：包含修饰符的对象。

    • （注意：Vue 3 的binding对象中没有expression属性）

vue2中自定义指令的使用-CSDN博客