![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 64
码农键盘上的梦
愿当年热情还在!
printf("hello,world!");
展开
-
vue 如何设置自定义指令
在 Vue.js 中,你可以创建自定义指令(Custom Directive)来封装可重用的 DOM 操作。Vue 提供了一种机制来扩展其内置指令的功能,允许你定义自己的指令并使用它们。你可以在 Vue 实例或 Vue 组件中定义一个自定义指令。定义时需要提供一个或多个钩子函数,这些函数会在特定时刻被调用。例如,我们定义一个v-focus// 在 Vue 实例中注册全局指令// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus();});focus: {原创 2024-07-19 13:46:40 · 102 阅读 · 0 评论 -
websocket封装
websocket在前端开发中,是一个必须掌握的技术!你可以不用,但必须掌握!前几天,就遇到这样一个需求,要求界面的数据通过websocket实时推送,并且必须支持断网重连、自动心跳!自动心跳是定期向服务端发送小型数据包,如果一段时间内服务端没有收到心跳响应,系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息:', event.data);原创 2024-05-31 10:38:47 · 777 阅读 · 0 评论 -
vue3中使用cherry-markdown
附cherry-markdown官网及api使用示例考虑到复用性,我在插件的基础上做了二次封装,步骤如下:1.下载 (,否则会报错:如果需要开启mermaid画图、表格自动转图表功能,需要同时添加mermaid与echarts包。目前推荐的插件版本为基础应用代码示例。原创 2024-05-13 17:05:54 · 576 阅读 · 0 评论 -
axios的安装使用
大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,这里将普适性的请求头作为基础配置。当需要特殊请求头时,将特殊请求头作为参数传入,覆盖基础配置。请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。封装的同时,你需要和 后端协商好一些约定,请求头,状态码,请求超时时间.......如果每个页面都发送类似的请求,都要写一堆的配置与错误处理,就显得过于繁琐了。请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问。原创 2024-03-05 09:20:15 · 1436 阅读 · 0 评论 -
VueUse 安装使用
VueUse 是一个集成了常用的 Vue Composition API 的函数库,它提供了一系列的 hooks 和工具函数,帮助我们更方便地使用 Vue Composition API。在本文中,我将为你介绍如何安装和使用 VueUse。原创 2024-03-04 11:30:14 · 862 阅读 · 0 评论 -
vue处理响应式数据,是Proxy性能好?还是defineProperty性能好?
首先,Proxy和defineProperty是两种不同的机制,用于实现JavaScript的元编程(metaprogramming)功能。defineProperty是ES5引入的一个特性,用于在一个对象上定义一个新的属性,或者修改一个已经存在的属性。它通过修改对象的属性描述符(property descriptor)来实现对属性的控制,例如可以定义属性是否可读写、是否可枚举、是否可配置等。原创 2024-02-27 09:37:14 · 1362 阅读 · 1 评论 -
vue3 使用pina
1. 首先,确保您已经设置了 Pinia 并创建了状态存储模块(确保项目中已经集成Pina 状态管理库)。通过以上步骤,您就成功地在 Vue 3 项目中使用 Pinia 发送了异步请求。通过以上步骤,您就成功地在 Vue 3 项目中集成了 Pina 状态管理库。2. 在您的状态存储模块中添加 action 来处理异步请求。方法来触发异步请求,并将获取到的用户数据展示在页面上。4.在您的 Vue 应用程序入口文件中(通常是。2. 在您的 Vue 3 项目中,创建一个。来定义您的状态存储模块。原创 2024-02-26 09:56:21 · 1526 阅读 · 0 评论 -
在Vue 3中加载本地图片和其他静态资源
以上是几种加载本地图片和其他静态资源的方法,根据你的具体需求和项目配置选择适合的方法即可。首先,确保你已经安装了file-loader或url-loader插件。首先,确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下,可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具,也可以使用ES6的。例如,如果图片位于与组件相同的目录下,可以使用。函数将图片作为模块导入,然后在组件中使用它。目录下,然后使用绝对路径来引用它们。原创 2024-02-23 15:17:31 · 6882 阅读 · 1 评论 -
在Vue3 + Vite项目中使用less
这样就完成了less的配置。在Vue3 + Vite项目中使用less,需要安装。首先,在项目根目录下执行以下命令安装。来指定使用less语法。标签中编写less样式。原创 2024-02-21 15:18:32 · 1230 阅读 · 0 评论 -
vue3+vite项目中显示SVG图片
总之,vite-plugin-svg-icons插件的作用是简化在Vue项目中使用SVG图标的过程,提供了更加灵活和方便的方式来管理和使用这些图标。vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,以便在Vue项目中使用。兼容性:vite-plugin-svg-icons 支持多种类型的 SVG 图标,包括普通的 SVG 文件、Symbol 图标和图标字体等。该插件还提供了一些额外的功能,如自动按需引入图标、支持图标的自定义命名、支持指定图标大小等。原创 2024-02-21 14:09:58 · 1062 阅读 · 0 评论 -
axios封装使用
进行请求的预处理和后处理:通过二次封装,可以在发送请求之前对请求进行一些预处理,如添加请求头、对请求参数进行处理等;大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,这里将普适性的请求头作为基础配置。进行二次封装,通过二次封装axios,可以提高开发效率、减少重复代码、提供一致的接口风格,从而使开发更加便捷和可维护,让使用更为便利!封装的同时,你需要和 后端协商好一些约定,请求头,状态码,请求超时时间.......请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问。原创 2024-02-21 11:15:34 · 937 阅读 · 0 评论 -
vue-router 提供的几种导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。原创 2024-02-20 14:34:53 · 1033 阅读 · 0 评论 -
vue中父组件直接调用子组件方法(通过ref)
是子组件中定义的一个方法,你需要根据实际情况替换成子组件中真正的方法名。此外,需要确保子组件已经被完全渲染和挂载,才能正确地访问到子组件的实例。通过以上方式,父组件就可以直接调用子组件的方法了。请注意,父组件调用子组件方法的前提是子组件已经被渲染到页面上。在 Vue 3 中,父组件可以直接调用子组件的方法,可以通过。属性来引用子组件的实例,然后通过该实例调用子组件的方法。访问子组件,并直接调用子组件的方法。首先,在子组件中,需要将要调用的方法使用。首先,在父组件的模板中,给子组件添加一个。原创 2024-01-29 11:28:23 · 4170 阅读 · 0 评论 -
Vue3在点击菜单切换路由时,将ElementPlus UI库中el-main组件的内容滚动恢复到顶部
在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动,但是我使用无效,于是使用操作dom的方法,如下。在回调函数中处理路由变化的逻辑 使其滚动到顶部。最后,在组件销毁前,我们使用。路由时,将页面滚动到顶部,布局如下,使用ui组件为element-plus。,这是一个响应式的路由对象。当路由发生变化时,回调函数将被调用,其中的。参数表示要切换到的路由对象,,当路由变化后滚动到顶部。原创 2024-01-17 18:13:59 · 818 阅读 · 0 评论 -
Vue3实现PDF文件预览 (低版本浏览器兼容)
/ 这里必须使用异步去引用pdf文件,直接去import会报错,也不知道为什么// 此文件位于public/testPdf.pdf// // 仅加载第一页 注释 取消页码切换// 加载pdf所有页})// 加载pdf的某一页// 缩放比例1;// 获取窗口大小// 这里transform的六个参数,使用的是transform中的Matrix(矩阵)// 进行渲染resolve();});});});原创 2024-01-14 15:22:08 · 6908 阅读 · 4 评论 -
Vue3的watch函数中,第三个参数配置对象详细分析
这些是`watch`函数的第三个参数的一些常见配置选项。您可以根据需要选择适当的配置来满足您的需求。原创 2023-12-04 14:39:32 · 1196 阅读 · 0 评论 -
Vue2生命周期、Vue3生命周期及其对比
Vue2生命周期、Vue3生命周期及其对比,总结: Vue2和Vue3钩子变化不大,beforeCreate 、created 两个钩子被setup()钩子来替代。原创 2023-12-01 15:03:37 · 1496 阅读 · 0 评论 -
Vue3 中几种独有的选择器 深度选择器:deep()、插槽选择器:slotted()、全局选择器 :global()
在Vue中,除了常见的CSS选择器外,还有一些独有的选择器,这些选择器可以更方便地操作Vue组件。原创 2023-12-01 09:37:44 · 2066 阅读 · 0 评论 -
ElementPlus 上传文件依据后端返回对象中code是否为200,如果是200就提示上传成功,如果不是200,就打印后端返回对象中message字段,并在上传列表中清除该文件
在上传成功时,会弹出提示框提示上传成功;在上传失败时,会弹出提示框提示上传失败并打印后端返回的错误信息,并且在上传列表中清除该文件。为表示上传结果的状态码,200 表示上传成功;为上传结果的详细说明。原创 2023-11-30 16:48:19 · 560 阅读 · 0 评论 -
vue3中使用reactive定义的变量响应式丢失问题(重新分配一个新对象会丢失响应性 大坑!!!)
在Vue 3中,可以使用reactive函数将普通JavaScript对象转换为响应式对象,这样当对象的属性发生变化时,就会自动更新相应的UI。但使用reactive时,如果不当使用,可能导致响应性失效,带来一些困扰。这可能让开发者在愉快编码的同时,突然发现某些操作失去了响应性,不明所以。因此,建议在不了解reactive失去响应的情况下慎用,而更推荐使用ref。首先看一下reactive和refreactive// 定义一个响应式变量name:"",age:""});// 请求接口。原创 2023-11-15 14:28:53 · 4636 阅读 · 2 评论 -
Vue 下载本地静态资源static文件夹
项目需要下载本地的docx文档,文档是放在本地的没有在服务器,所以需要下载本地静态资源文件,开始把文件放在了这里src目录下的assets资源文件下。下载报错 找不到文件路径查找原因是因为项目用的是vue-cli3, 在打包的时候并不知道会把assets。你可能在输入路径的时候会提示你是src,而不直接是static,但是你还是要直接输入static这个路径。下的文件打包在哪里,但是在build的时候发现在根目录下的文件是打包在当前路径下的。原创 2022-03-22 14:06:41 · 7444 阅读 · 1 评论 -
Vue中使用v-bind:class动态绑定多个类名
在上述代码中,我们设置了一个类名为container的主容器元素,然后将三个样式类名(color、size和font)用数组的形式统一传递给了v-bind:class指令。在Vue.js开发中,经常需要动态绑定HTML元素的class(类名)属性,以改变元素的外观和行为。在Vue中,我们可以使用v-bind:class指令动态绑定HTML元素的class属性。具体说来,v-bind:class可以接受一个对象作为参数,在这个对象中,每个属性的键名表示一个类名,键值表示该类名是否被应用到元素上。原创 2023-08-14 16:07:31 · 1735 阅读 · 0 评论 -
前端实现文件预览功能
需求:实现一个在线预览pdf、excel、word、图片等文件的功能。介绍:支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。原创 2023-08-14 09:54:04 · 534 阅读 · 0 评论 -
vite项目低版本浏览器兼容性问题
该语句是ES6的新语法,一般浏览器都没有问题,但低版本的浏览器无法解析该语句,所以要进行js转换,一般的vue2项目我们会使用babel,但。里不好使用babel,需引入另一个插件,esbuild,他可以把指定文件转译成目标文件,如ts->js,话不多说,贴代码。//其中vue()是vite脚手架帮我们自动生成的,我们只需要添加一个属性就可以了。2、这个是打包后实现。原创 2023-08-09 11:18:14 · 923 阅读 · 3 评论 -
vue加载大量数据优化
避免在循环中使用复杂的计算或方法:如果在循环中计算复杂的表达式或调用方法,会导致性能下降。综上所述,以上方法可以有效地优化Vue中加载大量数据所形成的列表的性能。使用JSON的数组格式化:在获取数据时将数据进行数组格式化,这样可以避免Vue对数据进行递归观察造成的性能问题。分页加载:不要一次性加载所有的数据,而是分批加载数据,每次只加载当前页需要显示的数据量。虚拟滚动:只渲染当前可见区域的数据,对于不可见的数据使用占位符来代替。避免频繁的数据变更检测:可以使用Vue的。来实现无限滚动加载。原创 2023-08-07 17:19:00 · 1828 阅读 · 0 评论 -
ElementPlus文件上传 ,在上传前钩子中判断文件是否为图片
设置为true,否则将其设置为false,并且返回false来阻止文件上传。同时,可以根据情况给出相应的错误提示。变量来记录文件是否为图片,初始值为false。然后,在钩子函数中判断文件的类型是否为图片类型。属性来指定上传文件之前的钩子函数,在该函数中可以对文件进行判断并进行相关操作。在ElementPlus中,可以使用。函数中,首先获取文件的类型,然后使用。首先,在data中定义一个。原创 2023-08-07 16:00:17 · 495 阅读 · 0 评论 -
elementUi select下拉框触底加载异步分页数据
通过以上步骤,我们就可以实现当下拉框触底时自动加载下一页数据的效果。你可以根据自己的需求,调用相应的接口请求下一页数据并展示到下拉框中。在Element UI中,可以通过监听select下拉框的。事件来实现触底加载下一页的效果。原创 2023-08-07 10:53:52 · 3101 阅读 · 4 评论 -
vue把页面中某部分的dom元素生成图片
在Vue中可以使用将某个部分生成为图片(生成二维码)。原创 2023-07-10 14:26:12 · 2262 阅读 · 2 评论 -
vue3+vite封装配置axios
vue3+vite封装配置axios原创 2023-06-28 12:42:14 · 932 阅读 · 0 评论 -
Vue3+vite中Axios的配置和使用方法
以上就是在Vue3中使用Axios的配置和使用方法。原创 2023-06-28 12:42:35 · 2184 阅读 · 0 评论 -
vue3+vite配置环境变量
以 VITE_ 为前缀定义变量修改vite-env.d.ts。原创 2023-06-28 12:22:03 · 1296 阅读 · 0 评论 -
vue3+vite安装配置element-plus
注意:按需引入时element-plus不需要在main.ts中引入,插件会自动挂载处理,可以在全局直接使用。这里在main.ts中引入element-plus样式与图标。原创 2023-06-28 12:11:28 · 981 阅读 · 0 评论 -
vue3+vite配置路径别名@
修改tsconfig.json 添加。原创 2023-06-28 11:31:58 · 1220 阅读 · 0 评论 -
vue3+vite+ts项目配置开发环境和生产环境 打包命令配置
开发环境和生产环境的配置和打包方式有所不同,下面是基于vue3+vite+ts项目的开发环境和生产环境配置及打包方式的详细说明。打包完成后会在项目根目录下生成dist目录,里面包含了打包后的静态文件和index.html文件,可以直接部署到服务器上。这里配置了三个命令,分别是开发环境启动命令、开发环境打包命令和生产环境打包命令。1.3 配置.env.development。2.2 配置.env.production。1.2 配置vite.config.ts。2.1 配置vite.config.ts。原创 2023-06-20 16:33:28 · 9613 阅读 · 4 评论 -
vue使用外部字体自定义LCD字体(晶管体)
大屏监控中常用到液晶字体效果,如下图所示: 1、下载地址【Techno > LCD fonts | dafont.com】转换字体的步骤:--->①点击“UPLOAD FONTS”按钮上传文件--->②选择要转换的类型--->③点击“ Yes, the fonts I'm uploading are legally eligible for web embedding.”,出现下载按钮--->④点击“download your kit”,即可将转换后得到的字体下载下来。如下图:原创 2023-06-15 09:46:48 · 1471 阅读 · 0 评论 -
从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境
GitHub Actions 是 GitHub 的持续集成服务,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器、发布到第三方服务等等,GitHub 把这些操作称为 actions。本文从技术选项到架构搭建、从代码规范约束到提交信息规范约束,从单元测试到到自动部署,一步一步带领大家如何从一个最简单的前端项目骨架到规范的前端工程化环境,基本涵盖前端项目开发的整个流程,特别适合刚接触前端工程化的同学学习。转载 2023-05-05 11:15:10 · 68 阅读 · 0 评论 -
Pinia与Vuex区别、Pinia安装与使用
1.3 根目录新建store/index.js中写入。2.2 组件使用pinia的state数据。2.3 组件修改pinia的state数据。2.4 如果state数据需要批量更新。2.1 Pinia定义state数据。1.2 main.js引入。原创 2023-04-25 14:37:34 · 1504 阅读 · 0 评论 -
Vue 3组件传值 、组件通信
根据上面的demo,我们在父组件中定义数据和对数据的操作,子组件只渲染一个列表。在子组件中,我们先定义props和emit,添加完成后,再emit指定的事件。Emit也是Vue中最常见的组件通信方式,用于子组件向父组件传递消息。在父组件中,只需要监听子组件的自定义事件,然后执行相应的添加逻辑即可。我们在父组件中定义列表,子组件只需要传递添加的值即可。原创 2023-04-20 17:19:36 · 699 阅读 · 0 评论 -
全方位解析 pinia
pinia的知识点很少,如果你有Vuex基础,那么学起来更是易如反掌。其实我们更应该关注的是它的函数思想,大家有没有发现我们在Vue3中的所有东西似乎都可以用一个函数来表示,pinia也是延续了这种思想。所以,大家理解这种组合式编程的思想更重要,pinia无非就是以下3个大点:stategettersactions。原创 2023-04-14 16:39:53 · 2046 阅读 · 1 评论 -
自定义别名报错Dynamic require of “path“ is not supported
vite版本此时已经不支持commonJS的方法导入path。自定义路径别名原创 2023-03-22 09:22:21 · 1113 阅读 · 0 评论