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 可拖动的左右面板分割组件实现)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
热门推荐
- SQL SERVER中查看某个时间段内出错的作业
- react 查看word文件(React实现导入导出Excel文件)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- OpenLDAP docker使用教程(Docker搭建OpenLDAP+phpLDAPadmin统一用户认证的方法)
- filezilla如何连接远程服务器(使用FileZilla快速搭建FTP文件服务的图文教程)
- ASP.NET函数返回多个值的几种方法
- python接口管理系统(基于Python实现用户管理系统)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- sql注入防范有哪些方法(如何有效防止sql注入的方法)
- python 写入d盘文件(python文件写入write的操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9