路由hash模式和history模式的实现
这篇文章主要介绍了路由的 hash 模式和 history 模式的实现。vue 中的 router 可根据不同 url 展示对应组件。hash 模式中，# 后的内容为 hash 值，变化不引起页面重载，监听 hashchange 事件加载对应组件。history 模式需阻止 a 标签默认行为，用 () 改 url 路径，监听 popstate 事件加载组件。 关联问题: hash模式有何局限 history路由咋优化 路由实现有何难点...
element修改Progress 进度条的背景色以及设置进度条颜色渐变
功能实现： 因为项目使用的 是element、所以这里以element为例、实现数据进度的展示。 UI原型图： elemet ui提供Progress 进度条 、直接引用即可。但是引入组件的样式是默认的、达不到我们的要求。 修改Progress进度条背景色 想要直接修改element组件的css样式值 需要加/deep/ 或者 实现样式穿透 HTML CSS 修改Progress进度条颜色渐变 element中圆形进度条是由svg绘制渲...
Vue3、Vite5、Primevue、Oxlint、Husky9 简单快速搭建最新的Web项目模板
<span style="color: var( g headertextcolor);" 特色</span ⚡️ 、 、 📦 🍍 🌈 Vue.js UI 套件，提高开发效率 🎨 高性能且极具灵活性的即时原子化 CSS 引擎 😃 🔥 使用 📥 直接使用 Composition API 无需引入 🌍 根据demo.js文件设置接口，以API xxx method的方式命名，在请求时无需导入 直接使用useRequest()...
el-select 的动态宽度解决方案
<span style="color: #252933;" elementui plus单选解决方案</span <span style="color: #252933;" .el select \ placeholder {</span <span style="color: #252933;" position: relative;</span <span style="color: #252933;" top: none;</sp...
搞懂::v-deep、::v-deep()和:deep()的区别与用法
在 项目中，尤其是在使用 开发时，我们某些时候需要对组件内部的某些样式优化，但 的 （ scoped ）会阻止 直接作用于组件内部。为了应对这一挑战， 引入了 （也称为 或 ），让我们能够 的 ，对内部元素进行 。 允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。 各深度选择器的区别 1\. 是 原生中的 语法，用于穿透样式封装。 \ \ 兼容性：\ \ 仅在某些特定环境（如 的 配...
原来vue3中template使用ref无需.value是因为这个
本文是 的第 15 篇，和该系列的其他文章一起服用效果更佳。 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 众所周知，vue3的template中使用ref变量无需使用 。还可以在事件处理器中进行赋值操作时，无需使用 就可以直接修改ref变量的值，比如： 。你猜vue是在编译时就已经在代码中生成了 ，还是运行时使用Proxy拦截的方式去实现的...
Vue v-for 进阶指南：in 与 of 的区别及应用场景
在 开发中， 是我们用来遍历数组、对象或其他数据结构的核心指令。然而，很多开发者可能忽略了其中的一个细微差别： 和 。这两个关键字看似相似，但却有各自不同的使用场景和适用数据类型。理解它们的区别，可以帮助我们编写更简洁、高效的代码。 本文将详细探讨 中的 和 ，并讲解它们各自的适用场景，帮助你在 项目中做出最佳选择。 什么是 ？ 是 提供的用于遍历数据的指令，它可以帮助你快速渲染列表、表格等动态生成的内容。在使用 时，我们通常需要遍历一...
升级Vue2 到 Vue3
2023年年底，vue2 正式地寿终正寝，不再被官方支持。公司业务的后台还有小程序项目都是使用 vue2，早在很早之前就有升级到 vue3 的想法，在我加入团队之前就有其他成员进行尝试，却不了了之。在23年年底前这一规划又被提上日程，当时我便打算拿我们后台的项目开刀，进行这一大更新。 1、方案调研 作为一个拥有十几万行代码，几百上千个文件的项目，手动一个个去更新，去研究 vue2 语法和 vue3 语法的区别自然是不现实的。既然在当时，...
Vue 3.5 新特性盘点 + 使用感受
这次更新的吸引力没有 3.4 那么大，首先最大的更新就是这个 props 解构了，这是一个编译器特性，能够追踪 props 结构出来的变量，然后把用到的地方自动添加 前缀。 上面的代码等价于： 这个语法糖看似挺有用的，但细想一下就是个鸡肋。首先已经有 可以将 props 转成一堆 ref，这次的新写法只是省了几个 ，外加少创建几个 ref 对象而已，性能也没啥区别。 其次如果组件大一点，那么 里头的变量和函数会相当多， 这解构又把一堆变...