Vue3 - 全局指令(详细教程)

news2025/7/21 10:49:54

前言

咱们在真实项目开发中,其实有很多指令都是通用的。我们绝对不可能去每个页面都定义一次,这样不仅写起来困难,维护起来更是困难,你想一下,假设稍微变点逻辑,你就需要翻阅好几个文件去改。

其实用法和局部指令基本相同,只不过定义的位置不同了而已。

回忆 Vue2

一般情况下,我们都会在项目根目录,创建一个 directive 文件夹,里面再建立一个 directive.js 文件,用来存放我们的全局自定义指令,这样做的好处呢,就是把自定义指令 聚集在一起,方便管理。

先来用 Vue2 实现定义全局指令,如下代码所示:

directive.js:

// 第一步,引入vue
import Vue from 'vue'

// 第二步,写具体指令
const getFocus = Vue.directive('getFocus', {
  ...
})

// 其他 N 个指令
// const xx = ...

// 第三步,导出
export { getFocus }

main.js:

// 引入自定义指令
import { getFocus } from './directive.js'

// 注册指令(注意必须import vue, 因为咱们用到了人Vue实例)
Vue.prototype.$getFocus = getFocus

这一套操作下来,便可以在全局进行使用。

<input @click="go" v-getFocus />

切入 Vue3

说完了 Vue2 中如何搞,咱们说说 Vue3 中怎么实现。

在项目根目录,创建一个 directive 文件夹,里面再建立一个 directive.js 文件。

// 另外app参数是啥?一会你就知道了
// 创建一个 directive 变量,用来聚集所有自定义指令
export const directive = (app) => {
	app.directive('getFocus', (el) => {
	  // 这将被作为 `mounted` 和 `updated` 调用
	  console.log(`这瓜保熟吗?${el}`)
	})
    // 更多指令...
	// app.directive('xxx', (el) => {})
}

第二步呢,打开 main.js 入口文件,进行全局注册。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

const app = createApp(App)

// 引入全局指令
import { directive } from './directive/directive'
 
// 全局注册
// 注意:要放在 const app = createApp(App) 之后
// 至于为啥?我想说就连刘海柱都知道信不?
directive(app)

app.mount('#app')

大功告成,我们来测试使用一下。

<input v-getFocus />

在这里插入图片描述

SEO

vue3.js官方文档,vue3全局指令,vue3全局指令官方文档,vue3全局自定义指令,Vue3全局指令,Vue3.x教程-Vue3,Vue3自定义指令,vue3中全局和局部自定义指令怎样实现,vue3自定义全局指令,vue3封装全局指令,vue3 学习笔记 (三)——vue3 自定义指令,Vue3 中自定义指令,Vue全局指令:如何添加全局指令,Vue3-巧用指令,Vue自定义指令的使用详细介绍,Vue3 - 全局指令(详细教程)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/17105.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

家用吸尘器的总体结构设计

目 录 摘 要 i Abstract ii 1 引言 1 2 家用吸尘器的历史及发展 2 2.1 家用吸尘器的历史 2 2.2 业界的发展情况 3 3 家用吸尘器的分类 5 3.1 卧式&#xff08;Canister&#xff09; 5 3.2 立式&#xff08;Upright&#xff09; 5 3.3 手持式 &#xff08;Handy&#xff09; 6 3…

ON1 NoNoise AI 2023:AI智能摄影降噪工具

ON1 NoNoise AI 2023中文版是一款强大的AI智能摄影降噪工具&#xff01;使用 AI 驱动的 NoNoise AI 快速去除噪点并获得照片中最清晰的细节。 更快地获得绝对最佳结果&#xff01; ON1 NoNoise 比其他领先的图像去噪产品快十倍&#xff0c;结果会让您大吃一惊&#xff01; 基于…

HI3516DV300 图像输入

HI3516DV300 图像输入 易百纳的一个开发板&#xff0c;以及GC2053的摄像头。 硬件 海思 海思sensor接口如下&#xff0c;用的是差分信号&#xff0c;共4对数据线&#xff08;或者说4条lane&#xff09;&#xff0c;两对差分时钟。 连接器 海思核心板和扩展板之间通过板件连…

小啊呜产品读书笔记001:《邱岳的产品手记-06》11讲 如何借鉴灵感 12讲 产品案例分析:LabRdr的设计实验

小啊呜产品读书笔记001&#xff1a;《邱岳的产品手记-06》11讲 如何借鉴灵感 & 12讲 产品案例分析&#xff1a;LabRdr的设计实验一、今日阅读计划二、泛读&知识摘录1、11讲 如何借鉴灵感&#xff1f;2、12讲 产品案例分析&#xff1a;LabRdr的设计实验三、头脑风暴叮嘟…

【计算机毕业设计】外卖点餐源码

一、系统截图&#xff08;需要演示视频可以私聊&#xff09; 摘 要 民以食为天&#xff0c;外卖点餐系统餐饮业一直是与人们日常生活息息相关的产业。传统的电话外卖点餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳…

电话机器人详解,电销机器人获客的正确姿势是什么?

电话机器人详解&#xff0c;电销机器人获客的正确姿势是什么&#xff1f; 相信很多没接触过电话机器人的人都会好奇。 首先是预设Q&A问答主流程 通过关键词辅助指导&#xff0c;终端在与客户互动时&#xff0c;会智能地获取相应的关键词库&#xff0c;逐一回答客户的问题…

ISACA证书维持| 内附QA

Q如何维持证书 A证书的维持主要由两部分组成&#xff0c;即维持费以及CPE&#xff08;继续职业教育&#xff09;学时。ISACA会在每个日历年的第三季度以电子邮件及印刷版的方式向所有持证人员发送次年费用清单通知。年度维护费支付可在 https://www.isaca.org/renewals 上在线…

完全背包问题的解决方法______闫氏 DP 分析法

完全背包问题的解决方法&#xff1a; 闫氏 DP\ DPDP 分析法: 通过集合划分&#xff0c;我们可以得到第 i\ ii 个物品有两种状态&#xff1a;  1.选 1−T\ 1 - T1−T 个&#xff0c;最优解为前 i−1\ i− 1i−1 个物品的所有选择中&#xff0c;还能选取当前 k\ kk 个第i\ ii 个…

模式识别与机器学习 第一章:绪论

一、基础概念 样本: 所研究对象的单个个体、实例。样本集: 若干样本的集合。类或类别: 在所有样本上定义的一个子集&#xff0c;处于同一类的样本具有相似的性质&#xff0c;即具有相同的模式。特征: 用于表征样本的观测&#xff0c;也称属性。通常是数值表示的某些量化特征&a…

基于帧间差分法的视频目标检测研究-含Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、引言✳️ 二、帧间差分算法原理✳️ 三、视频目标检测系统✳️ 四、参考文献✳️ 五、Matlab代码获取✳️ 一、引言 随着科技的发展、社会的进步、人民生活水平的提高&#xff0c;团体和个人的安防意识都在不断增强&#xff0c;视频监控系统也就得到了…

深入浅出 C++ 11 右值引用

彻底搞清楚&#xff1a;右值引用/移动语义/拷贝省略/通用引用/完美转发 —— 以最短的篇幅&#xff0c;介绍常见误解&#xff08;什么时候要用 move&#xff1f;什么时候不能 move&#xff1f;为什么 move 失败&#xff1f;&#xff09;和基础知识&#xff08;为什么右值引用变…

魔性洗脑神曲掀起模仿热潮,品牌为何热衷“打歌”?

【潮汐商业评论/ 原创】 抖音、快手、B站等社交媒介是品牌推广绕不开的阵地&#xff0c;围绕这些平台&#xff0c;一些品牌在“打歌”路上越走越远——通过几何级增长的播放量&#xff0c;使品牌定制曲迅速蹿红&#xff0c;成为“神曲”。这些定制曲仿佛自带魔力&#xff0c;不…

甘露糖-聚乙二醇-叠氮,mannose-PEG-N3,叠氮-PEG-甘露糖

甘露糖-聚乙二醇-叠氮&#xff0c;mannose-PEG-N3&#xff0c;叠氮-PEG-甘露糖 叠氮化合物是一类含有三个氮相连结构的化合物&#xff0c;一般用RN3表示。叠氮化合物是电子传递系统的抑制剂&#xff0c;能与细胞色素形成配位化合物&#xff0c;阻止细胞色素氧化酶氧化型a3组分…

【附源码】Python计算机毕业设计双笙映画

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

四则运算Java版

数据结构之栈的应用之四则运算_文丑颜不良啊的博客-CSDN博客 之前有写过一篇关于栈的应用之四则运算的文章&#xff0c;是用 C 写的&#xff0c;涉及到一些指针的操作&#xff0c;同时&#xff0c;那篇文章有一个致命的错误&#xff0c;就是只支持 10 以内的混合运算&#xff…

STM32微控制 -STM32命名规则-STM32寄存器缩写列表-STM32存储器和总线架构

STM32使用说明第一篇【1】STM32微控制器【2】STM32命名规则【3】STM32寄存器缩写列表【4】STM32存储器和总线架构【1】STM32微控制器 STM32是一个微控制器产品系列的总称&#xff0c;目前这个系列中已经包含了多个子系列&#xff0c;分别是&#xff1a; 【1】STM32小容量产品 【…

操作系统基础教程——第五章课后作业答案

1.思考题 &#xff08;3&#xff09;什么是文件的逻辑结构&#xff1f;它有哪几种组织方式? 文件的逻辑结构&#xff08;逻辑文件&#xff09;&#xff1a;独立于物理环境的&#xff0c;用户概念中的抽象信息组织方式&#xff0c;用户能观察到的&#xff0c;并加以处理的数据…

[datawhale202211]跨模态神经搜索实践:跨模态模型

结论速递 本次任务首先了解了CLIP模型及其原理&#xff0c;CLIP模型将图像标签替换为图像的文本描述信息&#xff0c;来监督视觉任务的训练&#xff0c;引入了语义匹配实现下游任务的zero-shot。 多模态和跨模态可能是未来模型的发展方向&#xff0c;多模态尝试结合不同信息表…

数字集成电路设计(四、Verilog HDL数字逻辑设计方法)(三)

文章目录4. 有限同步状态机4.1 编码4.2 有限状态机的写法4.3 举例4.3.1 用Verilog HDL 设计顺序脉冲发生器4.3.2 设计-个自动售报机报纸价钱为八角&#xff0c;纸币有 1角、2 角5 角、一元。该自动售报机不考虑投币为大额面值等特殊情况4. 有限同步状态机 &#xff01;&#xf…

『Java』类和对象

文章目录一、面向对象的初步认识&#x1f333;1、什么是面向对象&#x1f333;2、面向对象与面向过程&#x1f351;&#xff08;1&#xff09;洗衣服&#x1f351;&#xff08;2&#xff09;大象装冰箱汽车拼装二、类定义和使用&#x1f333;1、简单认识类&#x1f333;2、类的…