![](https://img-blog.csdnimg.cn/direct/a2f3f8df9eff438391937c8ccba79fce.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 83
渐进式JavaScript 框架易学易用,性能出色,适用场景丰富的 Web 前端框架。基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。
邹荣乐
拥有多年开发经验的前端工程师,曾经参与过多个大型项目的开发,积累了丰富的项目经验。希望能结交更多志同道合的朋友。
展开
-
vuex的工作流程,模块化使用案例分享,及状态持久化
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方生态系统中,并且在开发大型、复杂单页应用(SPA)时尤其有用。原创 2024-07-24 11:13:19 · 556 阅读 · 0 评论 -
vue3中父子组件的双向绑定defineModel详细使用方法
组件之间通讯,通过 props 和 emits 进行通讯,是单向数据流,子组件不能改变父组件传递给它的 prop 属性,推荐的做法是它抛出事件,通知父组件自行改变绑定的值。为了在声明 props 和 emits 选项时获得完整的类型推导支持,我们可以使用 defineProps 和 defineEmits API原创 2024-07-24 09:44:18 · 608 阅读 · 0 评论 -
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
处理大量数据的渲染对于前端开发来说是一项挑战,但也是提升网页性能和用户体验的重要环节。要有效解决这一问题,可以采用虚拟滚动(Virtual Scrolling)、分批渲染(Incremental Rendering)、使用Web Workers处理数据、利用前端分页(Pagination)、借助服务端渲染(SSR)来优化大量数据的处理。其中,虚拟滚动是一种非常有效的技术,它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度,也减轻了浏览器的负担,尤其适用于长列表数据的展原创 2024-07-01 09:12:06 · 1809 阅读 · 0 评论 -
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
WebSocket比SSE功能更加强大,WebSocket是在服务端和客户端建立的双向实时数据通道,而SSE只支持服务端想客户端的单向通讯浏览器对WebSocket的支持也更加广泛,IE、Edge几乎不支持SSEWebSocket有一套独立的标准协议,在使用过程中必须按照标准协议来,而SSE使用的是Http协议,只需要更改Context-Type为"text/event-stream;charset=utf-8"即可,这里需要特殊注意的一点,必须是utf-8。原创 2024-06-26 09:19:56 · 1917 阅读 · 0 评论 -
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE)。SSE(Server-Sent Events)是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。它基于 HTTP 协议,利用了其长连接特性,在客户端与服务器之间建立一条持久化连接,并通过这条连接实现服务器向客户端的实时数据推送。原创 2024-06-25 09:04:25 · 2546 阅读 · 2 评论 -
Web实时通信的学习之旅:WebSocket入门指南及示例演示
WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制,即WebSocket 协议可以跨域通信WebSocket 协议是有状态的,是前后端交互的长连接,即建立连接后可以保持连接状态,通信时可以省略部分状态信息WebSocket 协议可以发送文本,同时也可以发送二进制数据WebSocket 是一种强大的网络通信协议,它允许服务器和客户端之间进行实时、双向通信。原创 2024-06-24 09:18:51 · 2133 阅读 · 0 评论 -
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
在Vue.js的开发过程中,我们经常需要在客户端存储一些数据,以便在用户关闭页面或刷新后能够恢复之前的状态。Vue-ls插件就是一个为Vue.js设计的本地存储解决方案,它基于localStorage和sessionStorage,使得在Vue组件中存取数据变得异常简单。原创 2024-06-21 14:29:11 · 2041 阅读 · 0 评论 -
深入解析ESLint配置:从入门到精通的全方位指南,精细调优你的代码质量保障工具
ESLint是一个主流的JavaScript Lint工具,用于监测JavaScript代码质量,可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格,同时也可以通过配置文件来自定义规则。在前端开发中,ESLint可以帮助我们检查代码中的潜在问题,提高代码的可读性和可维护性。原创 2024-06-20 08:57:02 · 3556 阅读 · 1 评论 -
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
配置子应用的全局状态Actions,子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同,比如主应用中全局状态变量为{token: “main”},则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。我们从上图可以看出,我们可以先注册 观察者 到观察者池中,然后通过修改 globalState 可以触发所有的观察者函数,从而达到组件间通信的效果。本示例介绍的是子应用中通过路由守卫,把当前的路由面包屑名称传到主应用中,主应用展示面包屑功能。这里也可以监听主应用的参数。原创 2024-04-19 09:07:39 · 1456 阅读 · 0 评论 -
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。配置npm源:在你的本地开发环境中,将npm的源配置为你的私有仓库地址。注意:如果你的npm仓库是私有的,你可能需要在package.json中添加一个publishConfig字段来指定你的私有仓库地址。编写文档和示例:为你的工具方法编写清晰的文档和示例,这有助于其他开发者理解和使用你的工具库。文档和示例:持续更新和维护你的文档和示例,以帮助其他开发者更好地理解和使用你的工具库。原创 2024-04-21 17:00:25 · 1925 阅读 · 0 评论 -
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
确定组件库的需求和功能:在开始构建组件库之前,你需要明确你的组件库需要包含哪些组件,以及这些组件应该具备哪些功能。这有助于你更好地规划你的开发工作。编写组件代码:使用你熟悉的前端框架(如React、Vue等)编写组件代码。确保你的代码具有良好的可读性和可维护性,并遵循相关的编码规范。创建组件库的结构:为了组织和管理你的组件,你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。编写文档和示例:为你的组件编写清晰的文档和示例,这有助于其他开发者理解和使用你的组件库。原创 2024-04-15 10:42:24 · 3365 阅读 · 0 评论 -
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。原创 2024-03-09 10:31:17 · 6118 阅读 · 3 评论 -
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
RefreshToken 方法是现代 Web 应用中一种常见的身份验证机制,尤其在需要长时间保持用户登录状态的场景下具有重要意义。RefreshToken 方法的主要作用是在用户登录后,服务器生成一个 RefreshToken 并将其返回给客户端。客户端在之后的每次请求中都需要携带这个 RefreshToken,以便服务器能够验证用户身份并返回用户所需的数据。使用场景包括但不限于:用户在应用中的长时间操作、用户在多个设备上使用应用、用户需要跨域访问应用等。原创 2024-03-11 10:03:10 · 4580 阅读 · 1 评论 -
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件,请把用户输入的值msg传出去//也可以不传参数.itxst{原创 2024-06-18 09:00:43 · 6572 阅读 · 1 评论 -
养成良好的书写习惯,让你的代码变优雅的一些小技巧
箭头函数是ES6中引入的一种语法,它可以缩短函数的代码长度,同时提高代码的可读性。// 传统函数定义// 箭头函数简化// 传统对象创建age: 30,// 对象字面量简化。原创 2023-07-14 17:14:43 · 134 阅读 · 0 评论 -
基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率
在做可视化大屏时,大屏的分辨率基本都是固定死的,因此我们只需要把页面按照设计稿尺寸写死即可,但是我们开发屏幕很小,这时候总要将浏览器进行缩小,这里给出一个通用方法,供大家使用,无需缩放浏览器。应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。可以在一个项目里面,使用不同分辨率或比例的大屏页面。原创 2024-02-29 09:31:40 · 3979 阅读 · 2 评论 -
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
通过给 type=index 的列传入 index 属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从 0 开始)作为参数,返回值将作为索引展示。methods: {原创 2024-06-17 08:45:43 · 2411 阅读 · 1 评论 -
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
在这种方法中,前端发起一个请求到后端,后端生成Excel文件并返回给前端,前端再将文件下载到本地。注意,excel流文件一定要在请求的时候加上响应类型字段,也就是:responseType: 'blob’或者,responseType: ‘arraybuffer’ ,否则下载出来的excel文件就会损坏,就会打不开。具体操作:打开excel文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。去掉右侧的选项,点击确定。原创 2024-02-27 14:05:18 · 5396 阅读 · 0 评论 -
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。用来按条件显示一个元素的指令是 v-show。其用法基本一样:v-show 是通过控制display属性来进行dom的显示与隐藏v-if 是真正意义上的条件渲染,为true是渲染(dom存在),为false时不存在(dom不存在)原创 2024-03-09 10:31:32 · 1379 阅读 · 0 评论 -
Vue 3与Vue 2生命周期对比:新特性解析与差异探讨
Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,Vue3在2020年正式推出,在源码和API都有较大变化,性能得到了显著的提升,比Vue2.x快1.2~2倍。原创 2023-12-21 09:02:10 · 1064 阅读 · 0 评论 -
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
Pinia 与 Vuex 一样,是作为 Vue 的“状态存储库”,用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。当该数据、方法在很多地方都需要使用或需要通过页面保存的数据,如显示在导航栏中用户信息,一个多步骤表单页面等,这时我们就可以使用Store了。原创 2024-01-20 16:48:52 · 1192 阅读 · 0 评论 -
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval:与 setTimeout 类似,setInterval 也会将要执行的代码或函数放入事件循环队列中,但它在指定的时间间隔后会一直重复执行,直到 clearInterval 被调用或窗口被关闭。函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。原创 2024-06-21 08:42:30 · 3126 阅读 · 2 评论 -
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
在计算机科学中,语法糖(syntactic sugar)是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言,使操作变得更加清晰、方便,或者更加符合程序员的编程习惯。具体来说,语法糖是语言中的一个构件,当去掉该构件后并不影响语言的功能和表达能力。例如,C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器,包括编译器,静态分析器等,经常会在处理之前把语法糖构件转换成更加基础的构件,这个过程通常被称为"desugaring"。简而言之,语法糖就是一种便捷写法。原创 2024-04-09 14:48:57 · 13005 阅读 · 2 评论 -
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
首先,HTTP 301状态码表示永久重定向,这意味着服务器将请求重定向到新的URL,并且这个重定向是永久的,即客户端的后续请求都会被重定向到新的URL。而HTTP 302状态码表示临时重定向,这意味着服务器将请求重定向到新的URL,但这个重定向是临时的,即客户端的后续请求可能不会被重定向到新的URL。HTTP 302状态码表示临时重定向,当一个客户端发起请求后,服务器返回302状态码,表示请求成功,但需要客户端进行重定向,即需要将请求重定向到另一个URL上去。如果URL不存在,需要修改客户端的请求URL。原创 2024-03-05 14:13:20 · 2025 阅读 · 0 评论 -
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
单页面应用(SPA)的核心思想之一,就是更新视图而不重新请求页面,简单来说,它在加载页面时,不会加载整个页面,只会更新某个指定的容器中的内容。对于大多数单页面应用,都推荐使用官方支持的vue-router。在实现单页面前端路由时,提供了两种方式,分别是hash模式和history模式,根据mode参数来决定采用哪一种方式。routes,mode: "history" // 或者 "hash"})原创 2024-01-09 09:34:09 · 2892 阅读 · 0 评论 -
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
路由懒加载,也叫延迟加载或按需加载,是在需要的时候进行加载的一种技术。在单页面应用(SPA)中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。原创 2023-12-06 10:56:26 · 3796 阅读 · 0 评论 -
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
Keep-Alive是Vue.js中的一个内置组件,它可以用来缓存不活动的组件实例,而不是销毁它们。当Keep-Alive包裹动态组件时,它会将组件的状态保存在内存中,以防止在组件切换过程中重复渲染DOM,从而提高性能和用户体验。Keep-Alive自身不会渲染一个DOM元素,也不会出现在父组件链中。原创 2023-12-30 14:20:45 · 2527 阅读 · 0 评论 -
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息;增加涟漪特效动画。本文以吉林省地图为例,来实现吉林省市的地图的绘制。根据数据在地图上显示柱状图信息;增加涟漪特效动画。你也可以显示中国地图或其他身份地图。原理是一样的哦。主要是通过geo地理坐标系组件实现地图绘制。柱状图是利用3个样式(顶部椭圆、中部矩形、底部椭圆)层叠实现的。原创 2024-01-19 11:09:00 · 2250 阅读 · 0 评论 -
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据不同显示不同天气图标;显示省市的温度信息等数据。本文以吉林省地图为例,来实现吉林省下所有市的天气显示效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。主要是通过label里面的formatter和rich来自定义样式的,在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。原创 2023-12-28 09:31:10 · 1418 阅读 · 0 评论 -
深入剖析Vue中v-for的使用及index作为key的弊端
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名,v-for 也支持使用可选的第二个参数表示当前项的位置索引。原创 2023-11-17 16:05:51 · 815 阅读 · 0 评论 -
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
通过 阿里旗下的高德地图提供的api ,可以获取到中国各个省份/区级/县级的json数据,但是区级和县级,并没有包含街道和乡镇的数据。与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系,能够标示地球上的任何一个位置。经度和纬度常合称为经纬度,把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。本文以吉林省地图为例,来实现吉林省及所有市的切换效果。原创 2023-11-17 16:02:48 · 5409 阅读 · 0 评论 -
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
在做项目时有这么一个需求,需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件,可以在网上下载,也可以使用本地window/font/路径下的文件。选择你本地的ttf文件,点击“Create”按钮,会生成一个js文件。上面乱码解决了,但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件,中文是乱码。在导出多页的时候,希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。原创 2023-11-13 09:22:28 · 5357 阅读 · 16 评论 -
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在vue中,数据的绑定都不用我们操心,例如在data中有一个 msg 的变量,你修改它,那么在页面上,msg 的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的 length 变成0,vue就无法知道发生了改变。原创 2023-11-13 09:20:13 · 8046 阅读 · 0 评论 -
Vue.js项目中全面解析定义全局变量的常用方法与技巧
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。原创 2023-11-03 14:12:14 · 16519 阅读 · 1 评论 -
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
如果你使用的是 webpack v5 或以上版本,你不需要安装这个插件。uni cli在App平台,仅支持生成离线打包的wgt资源包,不支持云端打包生成apk/ipa;此时,会提示选择项目模板(使用Vue3/Vite版不会提示,目前只支持创建默认模板),初次体验建议选择 hello uni-app 项目模板。在 HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境。提供有完整的cli 脚手架,可以通过 vue-cli 创建、运行、发行 uni-app 项目。原创 2023-10-21 18:22:01 · 3625 阅读 · 0 评论 -
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
qiankun作为微前端的一种融合方式,目前也比较成熟,但是由于各类开发技术选型非常繁多,导致了在项目中配置不同,解决别人的问题,不一定能解决自己的问题。原创 2023-10-17 15:19:37 · 3454 阅读 · 2 评论 -
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
对于大部分APP或网站而言,字体是很重要的一部分。在前端开发中,选用合适的字体往往会极大地提升网站的视觉体验。然而,网页中默认字体的种类和风格有限,且在不同的设备、浏览器上渲染效果不尽相同。因此,很多开发者会选择自定义字体来提升用户体验。原创 2023-10-11 17:56:30 · 2629 阅读 · 0 评论 -
PDF文件上传转成base64编码并支持预览
在工作中,有个需求:- 前端上传PDF文件,需要转成base64编码,传给后端。- 查看的时候,后端返回base64编码,前端实现PDF预览。目前有个缺点,PDF文件如果大于2M,就预览不成功了。原创 2023-09-20 10:53:13 · 5805 阅读 · 0 评论 -
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue.js 是一个非常受欢迎的前端框架,它能够快速构建交互性强的单页面应用。而 vue-property-decorator 是一个用于 Vue.js 的装饰器库,可以帮助我们更方便地编写 Vue.js 组件。下面来详细讲解 vue-property-decorator 的用法。原创 2023-09-15 11:35:22 · 1638 阅读 · 0 评论 -
Vue路由传参实战指南:三种常用方法示例演示
params传参只能用 name,不能用 path。地址栏不显示参数名称 id,但是有参数的值。query传参name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问。地址栏显示参数格式为?id=0&code=1原创 2023-08-16 14:16:50 · 1040 阅读 · 0 评论