Vue
文章平均质量分 57
Jyann~
要坚信,人生所有走过的路,都不会白走
展开
-
vue项目中引入神策埋点
埋点:用于跟踪应用使用的情况,记录用户在系统中的操作行为轨迹,后续用来进一步优化产品或提供运营的数据支撑,包括访问数、访客数、停留时长、页面浏览数和跳出率。埋点采集信息大致分为两大类:页面统计,操作行为统计。转载 2024-01-17 17:56:09 · 596 阅读 · 0 评论 -
接口获取数据控制台打印有值但是展开又没有了
谷歌浏览器只会展现响应式数据最后的结果,证明原来接口是有值的,后面对这个数据进行操作后,最终没有值了。所以对数据进行操作时最好对数据进行一次深拷贝 JSON.parse(JSON.stringify(data))原创 2023-12-04 10:36:47 · 768 阅读 · 0 评论 -
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking eve
浏览器页面警告:[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See Chrome51 版本更新以后,增加了新的事件捕获机制-Passive Event Listeners。下载default-passive-events。转载 2023-11-23 12:34:45 · 1764 阅读 · 0 评论 -
富文本组件vue-quill-editor使用
版本:"vue-quill-editor": "^3.0.6",原创 2023-11-14 11:15:50 · 331 阅读 · 0 评论 -
vue2自定义组件v-model实现
页面设置和组件管理切换:使用自定义组件v-model实现。原创 2023-11-11 14:18:57 · 1230 阅读 · 0 评论 -
elementUI的el-menu组件做内部组件和外链区分
场景:左侧菜单栏的菜单项有内部组件切换,也会有点击后进入外链的情况,如何同时处理这种情况?AppLink封装:插槽形式显示el-menu-item。原创 2023-11-07 11:11:52 · 825 阅读 · 0 评论 -
element-plus的el-tag标签关闭标签时的高亮显示逻辑
首页的tag一开始就会存在,而且是不能进行删除的当点击左侧栏的时候,如果tag没有该菜单名称则新增,如果已经有了那么当前tag背景为蓝色。删除当前tag,如果是最后一个,那么路由调整到它前面那个标签并且背景变蓝,如果不是最后一个那么路由调整到它后面那个标签并且背景变蓝。还有我们注意这个tag不论路由如何切换都是会存在的,所以这个tag一定要存在我们之前定义的Main.vue中。原创 2023-11-01 19:25:29 · 891 阅读 · 0 评论 -
vue3动态路由配置总结
路由不在router文件中写死,而是在登录后通过后端获取路由数据,然后进行动态路由设置。为什么要使用动态路由?可以进行权限管理,比如后端根据不同用户和超管会有返回不同的数据,这个数据控制路由、菜单、页面按钮等的显示和隐藏,从而进行权限控制。原创 2023-11-01 15:54:47 · 2455 阅读 · 0 评论 -
vite项目中mock和axios封装
【代码】vite项目中mock和axios封装。原创 2023-10-28 17:48:57 · 477 阅读 · 2 评论 -
双端diff算法
如下图,如果使用简单diff算法真实 DOM 节点会,但是实际上通过简单的观察可以发现只需要移动一次p-3就可以。所以得出结论:简单diff算法的性能在某些场景下并不是最好的。对于上述的例子,使用双端diff算法的性能会更高。原创 2023-10-27 15:20:16 · 202 阅读 · 0 评论 -
简单diff算法
在vue中用于比较新旧vnode的子节点都是一组节点时,为了以最小的性能开销完成更新,需要比较两个子节点,用与比较的算法就叫作diff算法。原创 2023-10-27 11:40:18 · 251 阅读 · 0 评论 -
Vue响应式数据的实现原理(手写副作用函数的存储和执行过程)
命令式框架关注过程声明式框架关注结果(底层对命令式的DOM获取和修改进行了封装)原创 2023-10-26 17:31:59 · 181 阅读 · 0 评论 -
Vue组件的本质和手写通过render渲染函数渲染组件
本质就是一个对象(mounted函数中打印一下组件即可看到打印的是一个对象)如何利用javascript对象来描述一个组件?如何修改渲染器的内容?渲染函数时写的只是针对虚拟节点不是针对组件(即传入一个对象)原创 2023-10-26 15:33:29 · 275 阅读 · 0 评论 -
手写Vue渲染器render函数
渲染器的作用就是把虚拟DOM渲染为真实DOM思考下,我们有一个虚拟 DOM,如何将它转换为真实 DOMprops: {},原创 2023-10-26 15:14:27 · 299 阅读 · 0 评论 -
Vue虚拟节点和渲染函数
虚拟节点(dom)本质上就是一个普通的JS对象,用于描述视图的界面结构。原创 2023-10-22 12:01:57 · 568 阅读 · 0 评论 -
vue-router(vue-router功能,跳转方式,路由守卫,路由懒加载,使用流程,3.x和4.x使用区别)
Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。原创 2023-10-22 10:56:24 · 194 阅读 · 0 评论 -
vue2 mixins混入
在vue中提供了一种复用性的操作,所混入的对象包含任意组件的选项(data|computed,生命周期|watch,methods)原创 2023-10-22 10:32:38 · 313 阅读 · 0 评论 -
Vue动态组件 <component :is=“XXX“></component>
注意,这个 attribute 可以用于常规 HTML 元素,但这些元素将被视为组件,这意味着所有的 attribute 都会作为 DOM attribute 被绑定。如 a标签 <component is="a" href="XXX.baidu.com"></component>,通过 Vue 的 元素加一个特殊的 is attribute 实现。currentPage可以包括已注册组件的名字,或一个组件的选项对象。原创 2023-10-21 18:26:13 · 497 阅读 · 0 评论 -
Vue计算属性computed和监听watch
初衷:为了解决模块里面有太多的计算逻辑让模版难以维护。计算属性可以依赖一个数据也可以依赖多个数据的变化使用场景:商品单价和数量改变时,商品总价更改。如果写在方法里面,那么每次修改商品单价和数量时都会去调用这个方法,这种每次去调用都会消耗一部分性能,对页面渲染并不友好。所以就可以使用计算属性,计算属性可以使用缓存。原创 2023-10-21 13:52:56 · 370 阅读 · 0 评论 -
插槽的基本使用和作用域插槽
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。即父子组件只能使用各自作用域的数据。原创 2023-10-21 13:06:39 · 366 阅读 · 0 评论 -
Vue组件通信
缺点:操作混乱,一般是父组件操作父组件的数据,子组件操作子组件的数据,这种方式是父组件中编写方法通过this.$refs.child.setMsg("传给子组件")的形式来操作子组件。4. $attrs/$listeners:能够实现跨级双向通信,能够让你简单的获取传入的属性和绑定的监听,并且方便地向下级子组件传递,在构建高级组件时十分好用。1. props/$emit 可以实现父子组件的双向通信,父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。原创 2023-10-27 09:34:38 · 94 阅读 · 0 评论 -
Vue生命周期钩子
vue生命周期表示在组件创建后的一系列变化,其中钩子函数会在生命周期的关键节点中被调用为什么在beforeCreated()时,data和methods方法还没有创建,但是在beforeCreated()里面打印this可以看到data相关的数据?跟浏览器有关,浏览器中,如果是引用数据类型,在后续对其有改变时,前面打印也会时后面更改后的数据。可以通过debugger断点进行查看就没有了。原创 2023-10-20 13:50:37 · 158 阅读 · 0 评论 -
Vue动态class
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。数组中也可以使用对象语法。原创 2023-10-20 13:46:33 · 1303 阅读 · 0 评论 -
v-model和.sync区别
v-model在页面中不只是能用于表单控件<input>, <textarea> and <select>中。除此之前还可以使用到自定义组件中。父组件使用了v-model以后,自定义组件里面,也不止限于表单组件。v-model其实只是一个语法糖,和子组件是不是表单组件没有关系。v-model="name" 其实是其实是v-bind:name="name"和v-on:update="name=>newName=name"的语法缩写。原创 2023-10-20 13:29:50 · 705 阅读 · 0 评论 -
vue路由实现按需加载的多种方式
异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面。但是使用会报警告:暂时不知道为什么。原创 2023-08-31 15:22:56 · 1854 阅读 · 0 评论 -
elementplus实现左侧菜单栏收缩与展开
Home.vue下包含aside.vue和menu.vue。原创 2023-08-28 17:27:33 · 8710 阅读 · 0 评论 -
vue3使用Elementplus 动态显示菜单icon不生效
菜单icon由后端提供,直接用的字符串返回,前端使用遍历显示,发现icon不会显示。原创 2023-08-25 17:36:05 · 2916 阅读 · 1 评论 -
vue项目权限管理
权限管理主要分为后端权限和前端权限。后端权限是关键,主要控制对数据库的操作;前端权限为辅,主要表现在对界面显示、路由导航、按钮显示操作与否、无效请求前端拦截和响应拦截提升用户体验等。原创 2023-08-25 15:54:51 · 865 阅读 · 0 评论 -
vue权限管理——请求和响应权限控制
每次请求请求头都携带token,没有token或者token失效后端会返回错误。原创 2023-08-25 15:53:09 · 939 阅读 · 0 评论 -
vue权限管理——按钮控制
获取路由元数据中的rights权限和按钮上的action记录权限做比较:如果包含则有该权限,否则无权限,进行删除元素或者设置disabledif (!// 注意要使用nextTick,才能立即修改DOM} else {else});原创 2023-08-25 15:42:11 · 976 阅读 · 0 评论 -
vue权限管理——菜单权限设置
此处用mockjs模拟。原创 2023-08-25 15:28:10 · 1327 阅读 · 0 评论 -
vue3+vue-cli使用mockjs
【代码】vue3+vue-cli使用mockjs。原创 2023-08-25 15:07:40 · 411 阅读 · 0 评论 -
vue3权限管理——(路由权限)动态路由设置
错误页面必须也使用动态添加方法,并且在路由动态添加完成后再添加,否则如果在基础路由中定义错误页面,那么每次点击路由都会首先找路由,没找到就会匹配到错误页面,从而跳转到错误页面。且路径必须有 "/"添加动态路由方法中,是使用router.addRoute()方法进行添加,Home表示将路由嵌套在Home页面下。以7.2的方式,在动态添加完其他路由后,再添加错误页面就能成功导到不同路由页面,但是警告依然会存在。注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用。,才能显示该新路由。原创 2023-08-24 17:10:59 · 7775 阅读 · 1 评论 -
vue3自定义指令防止表单重复提交
可以设置在某个事件段内不允许重复提交;或者点击提交后设置提交flag,flag为true则不能再次提交。原创 2023-08-21 15:44:00 · 698 阅读 · 0 评论 -
vue实例挂载过程
以下仅为个人见解。原创 2023-08-18 15:20:08 · 801 阅读 · 0 评论 -
vue3+vite 使用mockjs+axios模拟后端数据
如果你发现生产环境下无法请求mock接口,原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。你的请求会直接发出去,无法通过mock返回数据。解决方案:①直接在main.js中注入插件配置。创建一个js文件mockProdServer.js,位置和main.js同层,在src/mockProdServer.js。注意如果vite.config.ts中配置了代理proxy就会走代理请求,如果使用mockjs需要注释掉代理相关代码。转载 2023-08-15 17:33:39 · 1656 阅读 · 0 评论 -
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\works\large-file-uploader\node_module
vue3+vite项目需要使用nodejs16及以上版本才能正常运行,修改nodejs版本后成功启动。原因:nodejs版本太低。原创 2023-08-15 17:16:48 · 4290 阅读 · 1 评论 -
vue3+vue-simple-uploader实现大文件上传
vue-simple-uploader在vue3中的使用小案例原创 2023-08-09 18:27:46 · 2158 阅读 · 0 评论 -
解决vue3中不能使用vue-simple-uploader
vue-simple-uploader本身是基于vue2的,直接npm i vue-simple-uploader -S下载下来版本的是0.7.6。在vue3中无法使用会报错。解决:使用@next安装接下来要发布的版本就会下载1.0.1版本,即可使用vue3。更新后,再使用组件即可正常显示,不报错。注意:这个版本里面很多方法不太一样。原创 2023-08-08 15:55:58 · 1387 阅读 · 0 评论 -
uniapp 上拉加载更多
通过onReachBottom()声明周期函数监听到触底后,将pageNum+1,并重新发起请求。判断pageSize*pageNum >=total如果没有更多数据后,显示没有更多数据样式。首次进入时,通过onLoad获取参数及发起初次请求。原创 2023-06-07 16:42:31 · 385 阅读 · 0 评论