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自定义指令内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
- 它荣获 中国生态魅力镇 称号 就在咱们禹州,一起来看看(中国生态魅力镇)
- 真牛 禹州将建成中等城市(禹州将建成中等城市)
- 被骂欺师灭祖,与郭德纲公开叫板,何云伟改名何沄伟,开始画画了(与郭德纲公开叫板)
热门推荐
- mvc中partialview
- dedecmsseo如何布局(dedecms中tags标签页伪静态化修改技巧)
- docker-compose 原理(详解docker compose 用法)
- python有哪几种赋值(关于python多重赋值的小问题)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- python爬虫入门代码(python爬虫基础教程:requests库二代码实例)
- 还有什么问题要问我们的吗,如何回答
- python数组与矩阵转换(python 读取文件并把矩阵转成numpy的两种方法)
- kubernetes最优pod数(详解kubernetes pod的编排和生命周期)
- js隐藏显示tr
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9