
vue
文章平均质量分 63
vue学习
奶糖 肥晨
一名热爱技术和写作的00后前端程序媛,研究方向包括但不限于大前端、基础架构与中间件、性能优化等。相信不少朋友在优快云、掘金、博客园、InfoQ、阿里云、公众号,腾讯云等社区看到过俺的干货文章。欢迎一起讨论学习。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue3报错:Uncaught runtime errors: × ERROR this.$set is not a function TypeError: this.$set is not a fu
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。中,直接使用 Vue.set 也不再适用,而是推荐使用。或直接修改对象属性来触发响应式更新。数组中的对象属性,而不需要使用。为了修复这个问题,可以直接修改。原创 2025-03-18 19:54:56 · 744 阅读 · 0 评论 -
实现回车键自动登录功能:Vue 2 和 Vue 3 的解决方案
这个功能看似简单,但在 Vue 2 和 Vue 3 中的实现方式略有不同。本文将详细介绍如何在 Vue 2 和 Vue 3 中实现这一功能,并提供完整的代码示例。修饰符已被弃用,因为 Vue 3 的事件机制更加智能,默认会将原生事件绑定到组件的根元素上。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。如果你有其他问题或更好的实现方式,欢迎在评论区分享!在 Vue 2 中,我们可以使用。方法,用于处理表单提交逻辑。与 Vue 2 类似,定义。在 Vue 3 中,原创 2025-03-17 14:15:44 · 1016 阅读 · 1 评论 -
基于 Vue 和 Element Plus 的时间范围控制与数据展示
组件实现时间范围选择,并结合“日”、“月”、“年”按钮动态控制时间范围。:如果你觉得按钮样式不够酷炫,可以尝试添加动画效果或图标,让界面更生动哦!欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。本文将重点讲解如何在 Vue 项目中使用。原创 2025-03-14 11:35:23 · 1005 阅读 · 0 评论 -
vue用户访问不存在的页面跳转404怎么实现
这段代码的主要作用是:当用户访问任何未匹配的路径时(例如访问一个不存在的页面),Vue 会加载并显示404.vue页面。通常,这个页面会显示一个“404 - 页面未找到”的提示信息,帮助用户了解当前访问的页面不存在。原创 2025-03-12 13:24:55 · 619 阅读 · 0 评论 -
解决 Vue 项目启动时的端口占用问题:从错误到解决方案
今天我们来聊聊一个在 Vue 开发中经常遇到的“拦路虎”——端口占用问题。无论你是新手还是老手,这篇文章都能帮你轻松搞定端口占用问题!如果你不想终止其他进程,或者你希望保留当前运行的服务,可以通过修改 Vue 项目的配置文件来更改端口号。无论你选择哪种方法,都能让你从“端口占用”的泥潭中解脱出来,继续愉快地开发 Vue 项目!你的心情可能瞬间从“期待”变成了“崩溃”。,准备启动 Vue 项目时,突然蹦出一堆红色错误信息,其中最显眼的就是。重启项目,项目可能会重新选择一个端口,就不会有端口占用问题。原创 2025-03-10 09:50:28 · 1069 阅读 · 0 评论 -
vue+element|el-tree树设置懒加载和设置默认勾选
在实际开发中,很多数据过于庞大,需要分批请求,使用到懒加载。但是在tree的方法中,使用懒加载后无法直接使用default-checked-keys默认勾选。提供了强大的功能,能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。是 Element UI 提供的树形组件,支持懒加载、节点勾选等功能。组件时,树形数据的懒加载和默认勾选功能是常见的需求。属性,可以设置默认勾选的节点。该属性接收一个数组,数组中的值为需要勾选的节点 ID。事件回调函数会返回当前勾选的节点数据和节点对象。方法动态加载节点数据。原创 2025-03-06 14:38:38 · 2552 阅读 · 0 评论 -
vue报错:main.js:13 [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot rea
这样的错误,通常是由于路由配置不正确或者某些依赖未正确安装或初始化引起的。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。查看图片报错,能确定为路由问题,修改路由为正常路由就好了。在 Vue.js 中使用 Vue Router 时遇到。原创 2025-02-27 10:24:28 · 722 阅读 · 0 评论 -
vue报错:Uncaught runtime errors: × ERROR ResizeObserver loop completed with undelivered notifications.
问题:视窗尺寸变化或内容更新时,会频繁触发高度计算,导致 ResizeObserver 循环。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。el-table 组件使用了动态高度计算。🛠️1.用了动态的判断,导致的报错。原创 2025-02-07 15:50:47 · 2129 阅读 · 1 评论 -
vue项目安装element报错:npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm er
但是,这种做法并不推荐,因为它可能会导致运行时错误或者不兼容的行为,所以如果没有强烈需求,最好避免使用这种方法。是为 Vue 3.x 设计的 UI 库,所以如果你已经在使用 Vue 3,可以选择用。行业内幕,洞察先机。仅支持 Vue 2.x 版本,所以导致了这个依赖冲突。你有几个选择来解决这个问题,取决于你的项目需求。如果你希望强制安装这些不兼容的依赖,可以使用。会与 Vue 3 兼容,解决版本冲突。引起的,特别是在你的项目中使用了。版本,但你同时安装了。如果你需要在项目中导入。兼容,解决依赖冲突。原创 2024-11-28 16:40:33 · 1743 阅读 · 0 评论 -
vuex、vue-router实现原理
Vuex通过集中式的状态管理和单向数据流来管理应用状态,确保组件间状态的共享和同步。Vue Router通过路由表和动态路由管理 URL 变化,确保组件的渲染与 URL 的一致性。这两个库的结合使得 Vue.js 应用能够高效且结构清晰地管理状态和路由,提升了开发体验和应用性能。您好,我是肥晨。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。原创 2024-10-30 23:52:47 · 1115 阅读 · 0 评论 -
vue的路由的两种模式 hash与history 详细讲解
Hash 模式:适合不需要服务器支持的简单应用,兼容性好,但 SEO 和用户体验稍差。History 模式:提供更好的 SEO 和用户体验,但需要服务器的支持。选择哪种模式取决于你的项目需求、目标用户以及服务器环境。如果你需要考虑 SEO,建议使用 history 模式;如果希望快速部署,或者兼容老旧浏览器,可以选择 hash 模式。您好,我是肥晨。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。原创 2024-10-30 23:50:22 · 1368 阅读 · 0 评论 -
Vue 的 MVVM 详解
MVVM 是一种设计模式,旨在将用户界面(UI)与业务逻辑分离,从而提高代码的可维护性和可测试性。Model(模型):代表应用程序的状态和数据,通常与后端 API 交互。View(视图):用户界面部分,负责数据的展示,用户与应用的交互。ViewModel(视图模型):连接 Model 和 View 的桥梁,处理 UI 逻辑,负责数据绑定。Vue 的 MVVM 结构使得开发过程更加高效和简洁。通过清晰的模型、视图和视图模型分离,Vue 让数据和视图的交互变得自然而顺畅。原创 2024-10-30 23:47:25 · 867 阅读 · 0 评论 -
开源项目推荐-vue2+element+axios 个人财务管理系统
vue2+element+axios 个人财务管理系统是基于 vue2+element+axios 等主流技术栈构建的免费开源的后台管理前端模板。原创 2024-06-17 10:35:35 · 6737 阅读 · 2 评论 -
最新23道vue2+vue3面试题带答案汇总
Vue Router是Vue.js的官方路由管理器。它和Vue.js深度集成,使得构建单页面应用变得易如反掌。Vue Router通过映射URL到组件,使得用户可以导航到不同的视图,而不需要重新加载页面。它监听浏览器的地址变化,并根据路由配置加载对应的组件。原创 2024-06-07 17:03:20 · 6240 阅读 · 0 评论 -
面试题-Vue2和Vue3的区别
Vue 2 和 Vue 3 之间存在许多重要的区别,这些区别涵盖了性能、API 设计、组合式 API(Composition API)、响应式系统以及构建工具等方面。Vue 2 使用 Object.defineProperty 来进行数据劫持,它只能对对象的属性进行劫持,对于新增的属性或者数组的下标变更则无法监听。Vue 3 对 TypeScript 的支持更加完善,使得在 Vue 3 中使用 TypeScript 编写代码更加容易和可靠。行业内幕,洞察先机。的子节点中,而不是它原来的组件模板位置。原创 2024-06-07 16:51:29 · 4975 阅读 · 0 评论 -
vue改名为威优易?
威优易可能会继承 Vue 所具有的强大功能和简洁语法,同时可能会引入一些新的特性和亮点,让开发者们体验全新的前端开发乐趣。大家在日常的工作中,可能会遇到各种挑战和压力,希望通过这样一个小小的玩笑,能够让大家暂时忘却烦恼,放松心情。威优易,这个名字或许会在我们的脑海中留下一段美好的回忆,成为我们谈笑风生的话题之一。它的名字Vue,寓意着“视图”的意思,在前端开发中扮演着至关重要的角色。在这个愚人节,让我们一起欢笑、一起放松,同时也一起期待Vue.js在未来能够带给我们更多的惊喜和突破。哈哈,大家愚人节快乐!原创 2024-04-01 10:00:35 · 2054 阅读 · 5 评论 -
vue在页面使用Vue.prototype全局变量
在 Vue 的模板中,你可以直接访问在 Vue 实例或组件的 data、computed 或 methods 中定义的属性或方法。虽然这不是一个推荐的做法,因为方法调用在模板中可能会导致不必要的性能开销,但你可以通过定义一个方法来返回 globalTcType 的值,并在模板中调用这个方法。避免命名冲突:通常,全局变量和方法的名字以 $ 开头,这是 Vue 的一个约定,以避免与组件的 data、props、computed 等属性产生冲突。你可以在模板中直接使用它,或者通过组件的方法间接使用它。原创 2024-03-22 11:58:23 · 3073 阅读 · 0 评论 -
vue2 div滚动条下拉到底部时触发事件(懒加载) 超级简易版本的懒加载
通过监听div的scroll事件,可以获取滚动容器的相关属性,如滚动条的位置、可视区域的高度以及整个内容的高度。当滚动条到达底部时,可以执行相应的懒加载逻辑,比如加载更多数据。您好,我是肥晨。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。原创 2024-03-09 17:01:46 · 3459 阅读 · 0 评论 -
vue2+elementui上传照片(el-upload 超简单)
这个功能确实是非常常见的,尤其在后台管理系统中,文件上传功能几乎是标配。而Element UI,作为一个基于 Vue 的高质量 UI 组件库,其 el-upload 组件提供了非常便捷的文件上传功能。el-upload 组件允许开发者轻松地实现文件选择、上传、预览以及错误处理等功能。通过简单的配置和事件监听,开发者可以定制上传按钮的样式、上传进度显示、上传成功或失败后的回调函数等。此外,el-upload 还支持多种上传方式,如拖拽上传、多文件上传等,极大地丰富了用户的使用体验。原创 2024-02-28 22:26:26 · 3813 阅读 · 0 评论 -
在同一个Vue项目中的不同vue和HTML页面之间进行跳转
如果你要跳转到的目标HTML页面不是Vue组件,你可以将其作为静态文件放置在项目的public文件夹中。例如,如果你的目标HTML页面位于public/other-page.html,你可以直接在浏览器中访问http://localhost:8080/other-page.html(假设你的开发服务器正在运行在默认的8080端口)。在你的Vue项目中创建一个新的Vue组件,用于包含你要跳转的目标HTML页面。确保这个组件的模板文件和JavaScript文件都正确地组织在你的项目中。行业内幕,洞察先机。原创 2024-01-07 01:11:09 · 1175 阅读 · 3 评论 -
vue2bug解决:in ./src/views/install/data-base/scss/menu.scss Module Warning (from ./node_modules/postc
从给出的警告信息来看,问题似乎与CSS属性start有关这个属性在某些浏览器中可能不受支持,因此建议你使用flex-start代替。欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。原创 2023-12-28 18:43:49 · 1902 阅读 · 1 评论 -
npm i|bug处理| ERR! Error while executing: npm ERR! D:\Git\cmd\git.EXE ls-remote -h -t ssh://git
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。添加ssl或者添加name 、email 后重新npm i就好。ssl或者name 、email。原创 2023-11-06 13:49:55 · 5569 阅读 · 3 评论 -
Vue实例知识点分享
通过使用 Vue 实例,我们可以更方便地访问和管理应用程序的数据、状态和行为。同时,Vue 实例也是Vue框架中组件化开发的基础,通过实例可以创建包含特定功能和样式的可复用组件。总结来说,Vue 的实例是用来管理应用程序状态和逻辑的对象,它提供了一种方便的方式来组织和操作应用程序的数据和行为。原创 2023-06-27 17:20:43 · 355 阅读 · 33 评论 -
Vue模板编译
渲染函数将生成的虚拟DOM节点返回给Vue的渲染引擎进行进一步处理并更新到页面上。模板编译的过程将Vue模板转换为可执行的JavaScript代码,以便在运行时动态地生成虚拟DOM并更新视图。这使得我们可以通过声明式的方式编写模板,并通过Vue框架提供的编译器将其转换为有效的代码。原创 2023-06-27 17:08:55 · 531 阅读 · 1 评论 -
Vue中使用分布式事务管理解决方案
传统的单机事务(如关系型数据库的事务)无法直接应用于分布式环境,因为跨多个节点的事务操作可能存在网络延迟、节点故障、并发竞争等问题,导致数据不一致的风险增加。在使用分布式事务管理时,需要根据具体业务场景和需求来选择合适的解决方案,并在系统设计和实现过程中,结合合适的策略和机制来弥补缺点。乐观锁和幂等性设计:在设计数据模型时,引入乐观锁和幂等性操作,减少对分布式事务的依赖,以达到更好的性能和可靠性。性能开销:相比于单机事务,分布式事务需要额外的通信和协调开销,会对系统的性能产生一定的影响。原创 2023-06-20 18:04:39 · 675 阅读 · 0 评论 -
vue2和vue3的渲染过程简述版
标记优化:Vue 3引入了递增式的静态标记(Incremental Static Marking),通过分层次、增量式的标记方式,将模板标记为可静态节点、需要动态跟踪的节点以及可能产生动态内容的节点,进一步减少不必要的更新操作。同时,Vue 3还引入了递增式的静态标记,可以进一步减少不必要的更新操作,提升渲染性能。渲染虚拟DOM:Vue根据渲染函数生成虚拟DOM(Virtual DOM),虚拟DOM是一种轻量级的JavaScript对象,用于表示真实的DOM结构。然后,根据差异进行有针对性地更新。原创 2023-06-19 17:02:48 · 2979 阅读 · 20 评论 -
> Construction@0.1.0 serve > vue-cli-service serve ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序
步骤四: 如果仍有异常,则检查是否有 node modules 文件有,可以修改node modules的文件名(这里也可以直接删除node modules);如果没有 则 单独安装 vue-cli-service;步骤一: 检查package.json 中是否有 vue-cli-server,没有则需安装。‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序。步骤二 : 执行npm install命令。原创 2023-05-30 16:15:00 · 1788 阅读 · 0 评论 -
vue 改变数据后,数据变化页面不刷新
this.$nextTick 跟全局方法 vue.nextTick 一样,不同的是,回调的 this 自动绑定到调用它的实例上。this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。在vue项目中,会遇到修改完数据,但是视图却没有更新的情况。使用方法:直接调用即可,或者放到html里面使用。vue 改变数据后,需要滑动页面,数据才更新。vue中表格数据已改变,页面却未更新数据。vue 改变数据后,数据变化页面不刷新。原创 2023-05-11 14:11:17 · 6152 阅读 · 0 评论 -
vue2实现后台管理系统的侧边栏切换子页面
【代码】vue2实现后台管理系统的侧边栏切换子页面。原创 2023-05-07 15:55:58 · 898 阅读 · 0 评论 -
vue3+typescript+vant页面开发案例
【代码】vue3+typescript+vant页面开发案例。原创 2023-04-07 10:32:15 · 1031 阅读 · 0 评论 -
vue3 +ts 如何安装封装axios
以vite创建的项目,使用访问接口,并调用接口。vue3安装封装axios,其实和vue2的大差不差。只是在ts和js上,有些区别。原创 2023-04-04 13:44:04 · 4573 阅读 · 17 评论 -
scss|sass使用/deep/报错 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError
scss不支持这个选择器。/deep/ 变:deep。原创 2023-04-04 11:20:47 · 1287 阅读 · 0 评论 -
vue3报错 ERROR Failed to compile with 1 errorYou may use special comments to disable some warnings. U
直接在根目录下创建vue.config.js文件,关键代码。这么多错 全都是因为eslint严格格式。关闭eslint严格格式就好。原创 2023-03-31 16:25:01 · 1519 阅读 · 2 评论 -
vue3安装vant 按需引入和全局引入
【代码】vue3安装vant 按需引入和全局引入。原创 2023-03-31 12:03:04 · 795 阅读 · 11 评论 -
vant安装报错npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but packa
修改版本到16后安装成功。是因为node版本太低。原创 2023-03-31 09:54:47 · 472 阅读 · 0 评论 -
vue面试题八股文简答大全 让你更加轻松的回答面试官的vue面试题
此时我们就需要先根据真实dom生成虚拟dom, 当虚拟dom某个节点的数据改变后会生成有一个新的Vnode, 然后新的Vnode和旧的Vnode作比较,发现有不一样的地方就直接修改在真实DOM上,然后使旧的Vnode的值为新的Vnode。这种方法比直接操作真实DOM要快得多。从源码中可以知道,Vue判断两个节点是否相同时主要判断两者的key和元素类型等,因此如果不设置key,它的值就是undefined,则可能永 远认为这是两个相同的节点,只能去做更新操作,这造成了大量的dom更新操作,明显是不可取的。原创 2023-03-30 10:20:45 · 13143 阅读 · 64 评论 -
elementui修改提示文字(placeholder)的字体颜色el-input/el-input-number/el-select/el-cascader/el-time-select适用
elementui修改提示文字(placeholder)的字体颜色el-input/el-input-number/el-select/el-cascader/el-time-select/el-date-picker都适用。原创 2023-03-23 19:49:33 · 5105 阅读 · 0 评论 -
element自定义表头内容
el-table-column需要去掉label和prop属性, 然后使用插槽 slot。如果需要传参,header还是需要加上slot-scope=“scope”。prop也可不去掉。原创 2023-03-21 20:02:22 · 310 阅读 · 0 评论 -
Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能
其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。原创 2023-03-08 11:52:46 · 11524 阅读 · 14 评论 -
pm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: undefi
vue安装element报错。原创 2023-02-25 14:47:50 · 3105 阅读 · 0 评论