vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
类别:编程学习 浏览量:1344
时间:2021-10-23 10:28:46 vue3.0怎么往标签填数据
Vue3.0写自定义指令的简单步骤记录前言
vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令
在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的,
通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解
第一步
在main.js
在src下简历对应的文件夹
import Directives from "@/Directives/index";// 自定义指令(@ 代表src) const app = createApp(App); app.use(Directives); app.mount("#app");
第二步
import copy from "./copy"; // 引入需要的指令 const directivesList = { copy // 挂载 }; const directives = { install: function (app) { Object.keys(directivesList).forEach((key) => { app.directive(key, directivesList[key]); // 注册 }); } }; export default directives;// 抛出
第三步
在copy.js 写入我们的指令内容 Vue2 与Vue3只是一些生命周期函数修改
import { ElMessage } from "element-plus"; const copy = { mounted (el, { value }) { el.$value = value; el.handler = () => { if (!el.$value) { // 值为空的时候,给出提示 ElMessage.warning({ message: "您好,复制的值不能为空。", type: "warning" }); return; } if (window.clipboardData) { window.clipboardData.setData("text", el.$value); } else { (function (content) { document.oncopy = function (e) { e.clipboardData.setData("text", content); e.preventDefault(); document.oncopy = null; }; })(el.$value); document.execCommand("Copy"); } ElMessage.success("复制成功"); }; // 绑定点击事件 el.addEventListener("click", el.handler); }, beforeUpdate (el, { value }) { el.$value = value; }, unmounted (el) { el.removeEventListener("click", el.handler); } }; export default copy;
总结
到此这篇关于Vue3.0写自定义指令的文章就介绍到这了,更多相关Vue3.0自定义指令内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
热门推荐
- sqlserver拒绝访问怎么办(SQL server服务显示远程过程调用失败的解决方法)
- php7.4编译安装(PHP7.3.10编译安装教程)
- mysql架构方案讲解(MySQL 搭建MHA架构部署的步骤)
- dedecms如何提高网站权重(dede网站内容页如何调取栏目页标题及关键字组合为seo标题)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- mysqlroot本地远程都可登陆(mysql5.7 设置远程访问的实现)
- python群聊提示(python-itchat 统计微信群、好友数量,及原始消息数据的实例)
- Sql Server判断函数、存储过程等是否存在
- Sql Server 更新锁
- 如何让yii2高级模板运行起来(Yii框架Session与Cookie使用方法示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9