Vue3
文章平均质量分 70
vue3知识分享
前端~初学者
一个热爱羽球的前端初学者
展开
-
彻底搞懂Vue3中 watch、watchEffect区别!
注意:使用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件卸载时自动停止。使用异步回调创建一个侦听器,则不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。这个回调函数接受三个参数:新值、旧值,以及一个用于清理副作用的回调函数。是懒执行的:当数据源发生变化时,才会执行回调。注意:深层侦听需要遍历所有嵌套的属性,当数据结构庞大时,开销很大。的主要功能是相同的,都能响应式地执行回调函数。接受两个参数,第一个参数是数据发生变化时执行的回调函数,用法和。第二个参数是一个可选的对象,支持。原创 2024-02-28 10:10:48 · 1226 阅读 · 0 评论 -
vue3中引入svg矢量图
在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,这对页面性能来说是个很大的提升,而且我们svg文件比img要小的很多,放在项目中几乎不占用资源。原创 2023-11-24 15:06:34 · 1043 阅读 · 0 评论 -
vue实现无感刷新token
最近在做vue3管理系统项目的时候,涉及到登录token有效时间问题,能不能让token过期时间长一点,避免频繁进行登录。前端:后端,你能不能把token过期时间设置的长一点。后端:可以,但是那样做不安全,你可以用更好的方法。前端:什么方法?后端:给你刷新token的接口,定时去刷新token前端:好,让我思考一下需求当token过期的时候,刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知,避免频繁登录。原创 2023-11-13 15:07:00 · 614 阅读 · 0 评论 -
vue3中两个el-select下拉框选项相互影响
label: '1月' ,label: '2月' ,label: '3月' ,label: '4月' ,label: '5月' ,label: '6月' ,label: '7月' ,label: '8月' ,label: '9月' ,label: '10月' ,label: '11月' ,label: '12月' ,disabled: false, } , ] //把方法和数据返回出去 return {原创 2023-09-21 17:28:41 · 750 阅读 · 0 评论 -
vue3+vite3项目打包优化
Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项。跟随本文的脚步来看看如何对项目进行优化吧!原创 2023-09-20 10:21:27 · 2122 阅读 · 0 评论 -
vue3 + vite3 addRoute 实现权限管理系统
在权限系统开发中,根据后端返回的菜单列表动态添加路由是非常常见的需求,它可以实现根据用户权限动态加载可访问的页面。本篇文章我们将重点介绍动态添加路由的全过程。原创 2023-09-19 10:54:23 · 1025 阅读 · 0 评论 -
手把手搭建Vue3+Vite项目模板
本项目是一个基于Vite3搭建的Vue3项目模板,集成了TypeScriptESLintPrettierStylelintHuskyCommitlintpnpm包管理工具、Vue RouterPiniaSVG图标配置、SASSAxios等等。运行环境:VSCodeNode16+VSCodeTypeScript。注意:需要关闭Vetur插件。原创 2023-09-15 17:30:32 · 586 阅读 · 0 评论 -
vue3将页面导出成PDF文件(完美解决图片、表格内容分割问题)
【代码】vue3将页面导出成PDF文件(完美解决图片、表格内容分割问题)原创 2023-09-13 14:26:46 · 6509 阅读 · 6 评论 -
vue3中使用viewerjs实现图片预览效果
viewer.js支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件GitHub。原创 2023-09-06 15:07:27 · 1777 阅读 · 0 评论 -
vue3+element plus 封装上传组件(图片、文件)
【代码】vue3+element plus 封装上传组件(图片、文件)原创 2023-08-30 20:31:17 · 3819 阅读 · 2 评论 -
详解vue3中ref和reactive用法和区别
ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型。<template>})})const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据</script>以我们常用的表格数据举例,可以看到,ref定义数组与定义基本数据类型没什么差别,接下来看看reactive<template>})})原创 2023-08-29 22:34:51 · 1216 阅读 · 0 评论 -
十分钟,带你了解 Vue3 的新写法
本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。好了,对于快速上手 Vue3 来说,以上内容基本已经足够了。这篇文章本身不能做到帮你理解所有 Vue3 的内容,但是能帮你快速掌握 Vue3 的写法。如果想做到对 Vue3 的整个内容心里有数,还需要你自己多看看 Vue3 的官方文档。原创 2023-08-23 10:46:44 · 145 阅读 · 0 评论 -
vue3父子组件相互调用方法详解
在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。原创 2023-08-20 21:46:58 · 2866 阅读 · 2 评论 -
vue3 基于element plus对el-pagination进行二次封装
在vue3项目中,如果每个列表页都敲一遍分页方法,显然是不合理的,那么,下面我将基于element plus对el-pagination进行二次封装,使用vue3语法糖格式,废话不多说,开干。原创 2023-08-20 20:29:55 · 1142 阅读 · 0 评论 -
vue3中hooks用法详解
hook是钩子的意思,看到“钩子”是不是就想到了钩子函数?事实上,hooks还真是函数的一种写法。vue3借鉴开发出了,所以也就意味着也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似,但是相对mixins而言,hooks更清楚复用功能代码的来源, 更清晰易懂。原创 2023-08-02 17:27:10 · 3726 阅读 · 0 评论