![](https://img-blog.csdnimg.cn/4efb1ce2e87843809dd559cd44adca56.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 76
vue
夜空孤狼啸
生死看淡,不服就干
展开
-
axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止 fetch请求
【代码】axios封装以及详细用法axios请求拦截响应拦截请求重试请求终止。原创 2024-05-12 12:34:23 · 339 阅读 · 0 评论 -
脚手架搭建项目package.json配置中依赖的版本问题
主版本(大版本) 必须 一般代表了项目的重大架构变更,如进行不兼容的API更改。此版本(次要版本) 必须 一般代表了一些功能的增加或变化,但没有架构的变化。增量版本(小版本) 必须 一般是一些小的bug修复,没有重大功能变化。预发布版本或版本编译信息 不必须 添加到最后,作为扩展。大版本.次要版本.小版本,如:1.0.0。原创 2024-04-23 10:06:51 · 355 阅读 · 0 评论 -
前端webWorker 的介绍以及应用
Web Workers 是在浏览器中运行 JavaScript 代码的一种机制,它们在主线程之外运行,可以在后台执行一些任务而不阻塞用户界面。Web Workers 使得在浏览器中执行多线程操作成为可能,这有助于提高性能和响应性。原创 2024-04-12 12:54:33 · 1518 阅读 · 1 评论 -
前端虚拟滚动列表 vue虚拟列表
前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据,这种长列表是一个很普遍的场景,当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题;大数据量列表性能优化,减少真实dom的渲染看图:绿色是显示区域,绿色和蓝色中间属于预加载:解决滚动闪屏问题;大致了解了流程在往下看;原创 2024-03-31 00:08:43 · 3659 阅读 · 0 评论 -
前端将html导出pdf文件解决分页问题
前端将html导出pdf文件解决分页问题原创 2024-03-06 10:52:27 · 2054 阅读 · 0 评论 -
前端导出word文件的多种方式、前端导出excel文件
前端导出word文件的多种方式、导出excel文件 纯前借助word模板端导出word文件 (推荐,前端借助word模板导出word,需要的依赖库:docxtemplater,pizzip,jszip-utils,file-saver,前端导出excel文件,需要的依赖库:node-xlsx,当让也可以借助xlsx库,这个看自己选择,只要实现客户想要的功能就行。原创 2024-03-01 11:58:02 · 3551 阅读 · 5 评论 -
Surely Vue Table表格css、js方法去除水印
注意:需要相邻选择器标签的用clip属性去隐藏,其他的可隐藏的css属性都被定义为行内样式且权重最好,这也算是在找漏洞吧;推荐使用css,js要遍历所有div,增加性能损耗。在main.ts文件中全局引入。原创 2024-02-23 14:07:56 · 1108 阅读 · 2 评论 -
vue3、vue2以及非vue项目中拖拽改变dom结构以及数组顺序 vuedraggable
vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本,同样是基于Sortable.js实现的,你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景,本人在工作台和多选项卡环境下实践过,比自己实现的拖拽效果优雅多了,使用的方法也非常简单但和vue2版本的用法有一些vue语法上的区别,本文档将会列举全部的属性和事件。原创 2024-01-31 10:35:56 · 730 阅读 · 0 评论 -
vue预览pdf文件的几种方法
前端预览pdf的几种方法原创 2024-01-26 10:10:15 · 8662 阅读 · 1 评论 -
项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法
#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器history会记录次路由,当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由,这样不符合逻辑解决方案如下:主要是由于浏览器history记录了iframe嵌入页面的路由信息,这个信息不论是iframe内的地址跳转,还是iframe src的切换,都会被记录,下面给出解决方案原创 2024-01-11 15:58:56 · 755 阅读 · 0 评论 -
若依项目form表单过大报错Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded t
若依项目,富文本上传报错:Failed to execute ‘setItem’ on ‘Storage’: Setting the value of ‘sessionObj’ exceeded the quota.原创 2023-12-20 18:56:53 · 1901 阅读 · 0 评论 -
前端项目常用函数封装(二)
前端项目常用的方法原创 2023-12-20 15:45:05 · 1028 阅读 · 0 评论 -
前端项目常用函数封装(一)
前端项目用常用的方法原创 2023-12-20 15:44:19 · 709 阅读 · 0 评论 -
vue3 tab切换 动态组件
组件实例信息 如果你把组件实例放到Reactive Vue会给你一个警告:Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. Vue 收到一个组件,它被做成一个反原创 2023-11-23 15:38:46 · 1097 阅读 · 0 评论 -
html中如何用vue语法,并使用UI组件库 ,html中引入vue+ant-design-vue或者vue+element-plus
html中如何用vue语法,并使用UI组件库 ,html中引入vue+ant-design-vue或者vue+element-plus,本次项目中,需要引入github中别人写好的插件,插件比较大,没有方法直接在自己项目中,把别人的项目打包合并生成html(类似于前端项目打包生成的 dist ),修改这里面的html,这种情况要么用原生js写或者jquery还相对快一些,那为什么不直接用vue语法呢?哈哈哈,下面就教你怎么写。这里用antDesignVue4.0直接上代码,原创 2023-08-30 19:19:13 · 3114 阅读 · 0 评论 -
js判断手指的上滑,下滑,左滑,右滑,事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动
/ touchcancel: //系统取消touch事件的时候触发,这个好像比较少用。console.log(wheelDelta + ‘滑轮向上滚动’);console.log(wheelDelta + ‘滑轮向下滚动’);// touchmove: //手指在屏幕上滑动式触发。// touchstart: //手指放到屏幕上时触发。// touchend: //手指离开屏幕时触发。//火狐使用DOMMouseScroll绑定。//其他浏览器直接绑定滚动事件。原创 2023-08-18 13:57:49 · 3433 阅读 · 0 评论 -
vite打包配置以及性能优化
首先该安装的插件,你要安装一下吧这三个是最近本的,其他优化的插件下面会介绍到vite.config.ts文件中。原创 2023-08-16 22:07:28 · 1718 阅读 · 1 评论 -
vite4+vue3+electron23.3+ts桌面应用bs端开发 打包windows、linux、max三个系统的安装包
vite4+vue3+electron23.3+ts桌面应用bs端开发 打包windows、linux、max三个系统的安装包。原创 2023-08-16 22:15:00 · 963 阅读 · 0 评论 -
vue中全局状态存储 pinia和vuex对比 pinia比vuex更香 Pinia数据持久化及数据加密
原创 2023-08-06 15:17:51 · 920 阅读 · 5 评论 -
vue2、vue3生命周期详解以及对比
div class="child">child组件--{{num}}下面借用官网的一张图介绍vue3 的生命周期,应该会更加详细把。销毁 ---- 在元素被销毁之前立即执行。更新 ---- 当响应数据被修改时执行。挂载 ---- DOM被挂载时执行。创建 ---- 在组建创建时执行。eg:可以运行一下查看执行顺序。'app组件创建前''app组件创建后''app组件挂载前''app组件挂载后''app组件更新前''app组件更新后''app组件销毁前''app组件销毁后'原创 2023-07-31 09:51:48 · 2129 阅读 · 0 评论 -
vue2、vue3生命周期详解以及对比
vue2、vue3生命周期详解以及对比。vue3 的生命周期总共下面14个生命周期,当然常用的就几个。eg:可以运行一下查看执行顺序。'app组件创建前''app组件创建后''app组件挂载前''app组件挂载后''app组件更新前''app组件更新后''app组件销毁前''app组件销毁后'原创 2022-02-25 19:01:38 · 367 阅读 · 0 评论 -
进阶 vue自定义指令 vue中常用自定义指令以及应用场景,案例书写
除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。原创 2023-07-26 11:55:36 · 910 阅读 · 0 评论 -
vue项目项目使用animate.css动画效果
注意安装animate.css版本,我这里用的v4.1.1 ,animate__animated是基类必须使用的(因为安装的animate版本是4.x,使用时要注意对应的所有类名都以animate__开头,并且还要配合animate__animated一起使用!在main.ts文件中引入。原创 2023-07-20 09:44:20 · 975 阅读 · 0 评论 -
vue3语法糖详解(setup()、<script setup>)
vue3语法详解(setup()、<script setup>)原创 2023-07-17 19:36:21 · 4336 阅读 · 1 评论 -
vue3图片懒加载借助插件vue3-lazy react中的图片懒加载 借助插件 react-lazyload
【代码】vue3图片懒加载借助插件vue3-lazy。原创 2023-06-26 15:43:59 · 851 阅读 · 0 评论 -
项目常用函数封装总结
监听localstorage的变化多数组取交集判断两个数组是否有相同元素 返回相同元素(数组)判断hex颜色值是深色还是浅色随机生成深浅样色js判断是手机端还是移动端使用UA判断使用媒体查询判断fetch直接读文件内容,解决乱码问题前端导出文件将表格导出xlsx文件将表格导出 txt fasta fa csv tsv等文本文件js将二维数组转为 txt tsv csv fasta fa 等文本文件将字符串下载保存为 txt fasta fa csv tsv等文本文件下载文件文件原创 2022-07-08 20:13:02 · 1996 阅读 · 1 评论 -
js库总结
"html2canvas": "^1.4.1",//jspdf和html2canvas导出pdf文件 "jspdf": "^2.5.1",//jspdf和html2canvas导出pdf文件 "html-to-image": "^1.6.2", //将dom节点下载成png图片 "moment": "^2.29.1", // 时间格式化处理 "node-scp": "^0.0.22", // 局域网内使用scp命令复制文件(支持账号密码) "node-xlsx": "原创 2023-04-13 09:57:03 · 753 阅读 · 0 评论 -
vue实现IP地址输入框 前端vue3、vue2、react写IP输入框)
前端写ip地址框输入原创 2023-03-18 14:01:32 · 1218 阅读 · 0 评论 -
Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错
Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错Highcharts 写 venn图 鼠标悬浮效果以及点击事件原创 2023-03-09 11:42:26 · 1121 阅读 · 0 评论 -
Ant Design vue 组件 button自定义
Ant Design vue 组件 button自定义原创 2023-01-16 14:54:20 · 2839 阅读 · 5 评论 -
前端上传文件夹及其所有子文件夹和文件
思路:用fs.readdir得到当前文件夹的所有子文件和子文件夹,再用fs.stat里面的 isFile()和isDirectory() 去判断文件还是文件夹,注意是方法,然后去做相应的操作。上传文件夹,下面是主要代码,直接复制是不能用的。原创 2022-12-29 22:21:05 · 1210 阅读 · 0 评论 -
vue3中reactive对比ref watch watchEffect函数
3. ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)4. reactive通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据6. ref定义数据:操作数据需要 .value ,读取数据时模板中直接读取不需要 .value7. reactive 定义的数据: 操作数据和读取数据均不需要 .value。原创 2022-11-12 11:59:11 · 797 阅读 · 0 评论 -
前端导出图片和各种文件
前端导出png图片和各种文件的下载原创 2022-11-11 20:09:05 · 645 阅读 · 0 评论 -
windows、mac、linux中node版本的切换(nvm管理工具),解决项目兼容问题 node版本管理、国内npm源镜像切换
在工作中,我们可能同时在进行2个或者多个不同的项目开发,每个项目的需求不同,进而不同项目必须依赖不同版本的NodeJS运行环境,这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情,nvm就是为解决这个问题而产生的,他可以方便的在同一台设备上进行多个node版本之间切换。 无须卸载现有版本,可同时安装不同的版本,有使用项目需要在linux,mac、windows三个系统中运行,所以三个系统最好都安装nvm原创 2022-07-28 20:08:02 · 3110 阅读 · 0 评论 -
vue中vuex--状态管理模式
vuex介绍vuex相当于一个仓库 仓库当中存储了组件的状态vuex有以下五种状态 state 就像组件中的data 我们把相关数据存储在state getters 可以从state中得到一个新的数据集合 所以每一个getters函数都有参数state mutations 是唯一可以修改state的入口 想要修改state里边的数据必原创 2022-04-26 23:17:16 · 453 阅读 · 0 评论 -
vue中的导航守卫
全局前置守卫beforeEachrouter.beforeEach((to, from, next))to 表示将要去的路由地址from 表示将要离开的路由地址next 函数next() 表示下一步到什么地方去 决定了我们能不去执行下一步的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte原创 2022-04-23 19:26:56 · 1594 阅读 · 0 评论 -
vue中脚手架的使用 (@vue-cli、@vue/cli)
安装步骤: 1 全局安装@vue/cli npm install @vue/cli -g vue --version 查看vue脚手架是否安装成功 2 创建项目 vue create 自定义项目名 3 进入项目 并且 运行项目原创 2022-04-21 22:29:28 · 1431 阅读 · 0 评论 -
vue路由,动态路由,嵌套路由
vue路由 vue是一个单页面应用 我们页面其实是由组件组成 我们想要是要页面到页面之间跳转 我们只能通过vue组件进行模拟页面之间跳转 跳转过程 我们就需要使用vue-router 使用: 1 使用npm安装 npm install vue-router --save-dev 2 使用cdn进行外部引入 https://unpkg.com原创 2022-04-21 22:15:42 · 883 阅读 · 0 评论 -
vue中slot插槽
插槽里边我们需要着重记忆的插槽内容具名插槽作用域插槽解构插槽什么是slot在标签中写的内容会自动出现在slot组件中如果有了slot 我们可以让组件变得更加丰富多彩如果有多个slot 那么组件标签中的内容就会出现在所有默认的slot中具名插槽(具有名字的插槽) 如果一个组件模板中有多个slot组件标签 为了合理的分配slot 我们可以给slot添加name属性 给它起名字 组件模板 {原创 2022-04-21 22:03:33 · 580 阅读 · 0 评论