【vue2小知识】实现directive自定义指令的封装与全局注册

news2025/2/25 8:43:57

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:将我们的自定义指令directive统一管理并批量注册

目录

一、directive自定义指令介绍

二、全局注册使用流程

1.准备好我们需要的自定义指令

2.开始在main中导入该文件完成注册功能

3.完成了注册功能开始使用


【前言】我们在使用vue框架的时候,指令基本能够覆盖我们平常的工作。可难免我们根据业务需求走总有的指令无法一步到达我们想要的结果。这个时候我们就可以自己动手手动封装来制作一个指令用于完成我们的设计。


一、directive自定义指令介绍

1.概念:

除了 Vue 内置的一系列指令 (比如v-model或者v-show等众多指令 之外,Vue 还允许你注册自定义的指令 (Custom Directives)

2.作用:

丰富我们指令的功能,使我们组件具有原生指令不具备的功能作用

3.使用:

使用Vue.directive('自定义指令名',{对象中写方法}),随后v-自定义指令名使用(见下)

二、全局注册使用流程

1.准备好我们需要的自定义指令

创建一个单独的文件夹来存储我们的自定义指令

比如博主的路径:src/dynamic/index.js

export const focus = {
  inserted: function(dom, options) {
    console.log(dom, 'dom')// dom相当于$refs
    console.log(options, 'options')// 相当于该属性,我们的值可以从这获取
    dom.focus()
  }
}

我们查看我们的dom与options打印出来的是什么

 可以得知:dom是当前的标签,我们的options为我们自定义指令的属性方法等

2.开始在main中导入该文件完成注册功能

 main.js中完成导入

// 使用循环注册的方式
import * as directives from '@/directives'
// 开始遍历注册
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})
console.log(Object.keys(directives), 'Object.keys(directives)')
console.log(directives, 'directives')// 这玩意是一个对象

控制台查看我们导入的directives是什么,发现是一个对象

3.完成了注册功能开始使用

  自定义指令<input v-focus="'看看我传递的位置是传递到哪里去了'" type="text">

 可以看到我们传递给组件的值用 =" (数据)" 进行传递,我们通过打印options.value可以获取我们传递进来的数据

效果查看:当我们刷新页面后进入直接是触发了focus()方法

注意点:

  • 导入时候 * 是通配符表示全部 as为取别名
  • 使用方法为v-focus,切记加上v-进行使用
  • Object.keys()获取的是对象的键产生的数据用数组包裹起来,forEach()用于遍历数组
  • 值的传递使用value可以获取

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

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

相关文章

Cannot read properties of undefined (reading ‘validate‘)“

1、注意两个地方 1、ref前面 加冒号“&#xff1a;”&#xff0c;还是不加冒号。 2、this.$refs[value].validate()>&#xff08;&#xff09;&#xff0c;更改为this.$refs[value].validate()>(), 不排除this.$refs[value].validate()>(),有时候不会报错 2、示范代码…

解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supp…

npm sill idealTree buildDeps 安装踩坑指南(详细版)

背景&#xff1a; 已通过nvm安装node 18.8 需要运行 npx create-react-app demo01 首次提醒npm版本过低&#xff0c;但是更新npm失败&#xff0c;并且不再报错&#xff08;安装其他包同样不报错&#xff09; 且换源无果&#xff08;更换淘宝源、清除缓存没效果&#xff09;&am…

【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)

文章目录前言一、认识云IDE1.1、CSDN.开发云1.2、秘钥管理二、实战-使用云IDE2.1、初步实战springboot-demo&#xff08;clone默认模板代码&#xff09;2.1.1、新建工作空间2.1.2、启动springboot-demo项目2.1.3、编写一个helloworld接口2.2、运行前端工程项目2.2.1、初步尝试—…

Node.js卸载与重装,zip与msi安装详解

Node js卸载与重装&#xff0c;zip与msi安装详解 文章目录Node js卸载与重装&#xff0c;zip与msi安装详解卸载安装选择msi下载安装第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;选择zip压缩包安装&#xff08;选择msi安装的已可以看下这个&#xff09;第一步&#…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09;项目演示1、登录注册页面2、图片验证码3、修改 axios4、写到最后&#xff08;附源码&#xff09;系列内容参考链接基于 Vue3.x Vant U…

Vue3预览并打印PDF的两种方法

项目场景&#xff1a;后台接口请求数据&#xff0c;返回PDF文档的链接&#xff0c;在vue3页面可预览和打印该PDF。 在之前的Vue2项目中&#xff0c;预览并打印PDF用的是vue-pdf这个插件&#xff0c;但在vue3中是不支持的&#xff0c;只能换个插件了&#xff0c;于是经过测试&a…

jquery怎么给元素设置属性

设置方法&#xff1a;1、使用attr()方法&#xff0c;语法“$(selector).attr(属性名,值)”或“$(selector).attr({属性名:值;})”&#xff1b;2、使用prop()方法&#xff0c;语法“$(selector).prop(属性名,值)”。 1、使用attr()方法 attr() 方法设置或返回被选元素的属性值…

共享主机和 WordPress 主机之间的区别

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且…

npm install 报错(npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\node.js\odejs)

今天我正好要学习TS需要typeScript这个插件但是我用npm i typescript -g 这个命令安装的时候报错&#xff0c;我花了1个时才解决这个问题&#xff0c;下面我为大家提供一些解决方案 1.全部错误install 2.错误详解 该错误发生在修改npm的全局安装路径之后&#xff0c;再执行npm…

【Web 三件套】个人简单博客系统页面搭建(附源码)

文章目录1. 成品展示2. 知识准备3. 博客系统页面搭建3.1 基本介绍3.2 博客列表页3.3 博客详情页3.4 博客登录页3.5 博客编辑页3.6 公共页面样式3.7 markdown 编辑器引入4. 总结1. 成品展示 以下为个人搭建的一个简单博客系统页面&#xff0c;以后会不断改进&#xff0c;并且与…

VsCode镜像下载(国内镜像源,高速秒下)

VsCode镜像下载&#xff08;国内镜像源&#xff0c;高速秒下&#xff09;vscode官方网站下载速度太慢&#xff0c;非正规网站又不太敢下&#xff0c;通过镜像源下载就好了。你们不介意版本的话&#xff0c;下面是1.63版本的链接&#xff08;直接复制下载就好了&#xff09;&…

猿创征文|一文带你了解前端开发者工具

前端开发者工具目录一、前言二、前端开发者工具——编译器&#xff08;含插件&#xff09;1、VS Code2、VS Code 必备插件3、WebStorm三、前端开发者工具——UI 框架工具1、Element2、Vant四、前端开发者工具——API 调试工具1、ApiPost五、写在最后&#xff08;总结&#xff0…

Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

先看报错提示 根据报错提示反应的情况是&#xff1a;找不到模块&#xff1a;错误&#xff1a;无法解析 在遇到报错时应该仔细阅读报错提示&#xff0c;这样解决起来也不会没有头绪 在红色遮挡下有该报错出现的主要原因 在此处我们谈论一下解决该类报错的几种方法 1&#xff…

uniapp 总结篇 (小程序)

前期概述&#xff1a;做了很长时间的小程序了&#xff0c;在此做一个完整的项目总结&#xff0c;希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理&#xff0c;更重要的是帮助大家实现功能、流程。 uniapp 还是很强大的 可以开发 小程序、h5、pc、app 一、创…

Tomcat安装使用与部署Web项目的三种方法

✅作者简介&#xff1a;C/C领域新星创作者&#xff0c;为C和java奋斗中 ✨个人社区&#xff1a;微凉秋意社区 &#x1f525;系列专栏&#xff1a;MySql一点通 &#x1f4c3;推荐一款模拟面试、刷题神器&#x1f449;注册免费刷题 &#x1f525;前言 今天带来Tomcat的安装教程&a…

input 输入框限制只能输入两位有效小数

前端入门即教学&#xff0c;今天博主分享几个前端金额实用的小案例&#xff0c;复制拿过去就能用哦&#xff01; 相信有很多前端小伙伴在工作中遇到过这样的需求&#xff0c;就是限制输入框内容只能输入两位小数吧&#xff0c;想了用正则但是又不知道怎么下手的同学&#xff0c…

CSS 父选择器 :has()

精通CSS-点击快速学习 在CSS Selectors 4规范中,CSS 引入了一个名为 的新选择器:has(),它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。 父选择器如何在 CSS 中工作 在 CSS 中,如果我们想要选择某些东西,我们会使…

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研,比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等

文章目录1. Appsmith2. Amis3. LowCodeEngine4. form-generator5. H5-Dooring/pc-Dooring6. YAO7. Mometa8. NocoBase9. Sparrow10. vite-vue3-lowcode11. 华炎魔方12. Awesome Lowcode参考文档低代码是基于可视化和模型驱动理念&#xff0c;结合云原生与多端体验技术&#xff…

sortablejs的使用实践

文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put func…