
vue
文章平均质量分 52
好 运.
这个作者很懒,什么都没留下…
展开
-
Vue中el-table表格的拖拽排序
element-ui 表格没有拖拽排序的功能,只能使用sortable.js插件实现拖拽排序,当然也可以应用到其他的组件里面,用法类似,这里只说表格。原创 2023-09-02 17:20:24 · 2056 阅读 · 0 评论 -
浏览器刷新为什么不会走销毁(beforeDestroy和destroyed)周期?
因为之前我遇到一个内存泄漏的问题,然后呢我在vue的beforeDestroy生命周期钩子函数里去释放一个实例的内存(3d模型),然后因为电脑很卡,我一遍又一遍的刷新页面,之后我去看那个任务管理器的时候发现谷歌的浏览器内存竟然占到了四五个g,我想着我去释放内存了,怎么内存还会增长?我们可以在页面加载的时候添加一个监听事件去监听浏览器刷新,关闭,这样就可以在浏览器刷新或者关闭的时候也能处理对应的业务逻辑。浏览器不在乎你之前的页面是什么,相当于把你之前的页面给关了再打开 (原创 2022-12-23 16:25:21 · 2001 阅读 · 2 评论 -
vue监听element-ui的table表格滚动事件
template里边的代码我就不写了,你们可以直接用element-ui里面的table,也可以自己封装。这篇文章主要是讲述“如何监听element-ui table滚动事件”,按我自己尝试的方法去实现。如果要用第二种的话就用element-ui里边的分页组件,去实现就好,我用的第一种方法实现的。前两天做项目遇到一个问题,数据量大,然后表格渲染的很慢,而且很卡怎么办?那无非就是两种方法。原创 2022-12-23 16:06:31 · 4392 阅读 · 2 评论 -
Vue如何实现快进后退的跑马灯组件
由于业务需求,要实现一个会可以控制速度的跑马灯,刚开始用js的setinterval每隔几毫秒来减取一个字符拼接到后面,效果不理想就放弃了。后来用animate这个api实现了。当然现在有很多的第三方库可以实现这个需求,个人感觉还是手写的香效果图:组件代码父组件代码原创 2022-11-30 21:22:04 · 566 阅读 · 0 评论 -
在Vue项目中使用Mock.js
随着互联网行业的发展,前后端分离已经成为了行业的主流,也是一种趋势。在这样一种趋势的推动下去开发项目,一定会遇到这样一个问题,后端接口未开发完毕,前端页面如何展示数据呢?这个时候就用到mock.js了。// 属性名 name // 生成规则 rule // 属性值 value 'name|rule' : value属性值是字符串 String// 通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。原创 2022-09-24 16:32:59 · 2337 阅读 · 2 评论 -
vue+EventBus 兄弟组件传值
项目开发中遇到了这样一个业务:假设父组件是A,子组件是B和C,然后C组件的数据结构是受B组件的改变而改变,就想到了用事件总线(EventBus)来进行兄弟组件之间的通信。用过之后也确实很好用,记录并分享一波…原创 2022-08-22 20:27:59 · 470 阅读 · 0 评论 -
vue打包之后更改配置的json文件无效
在project.config.json里面更改配置后不生效,具体原因还没有找到。然后把这个js文件引入到public/index.html下。在项目中就可以直接使用window.api进行使用。把json文件换成js文件。这是目前我找到的办法…...原创 2022-08-16 17:52:12 · 3544 阅读 · 7 评论 -
解决vue组件props传值,对象获取不到的问题
父组件利用props向子组件传值,浏览器console有这个值,但是获取不到对象里的属性,console对象的属性值,打印出来值为undefined。上面三种方法,在子组件都能watch到父组件传过来的testobj对象的值。都能解决获取不到父组件传过来的对象的问题。方法1:可以用JSON.parse(JSON.stringify(this.echartObj))方法3:Object.assign({},obj)也可以。方法2:用以下形式给对象赋值。...原创 2022-08-14 09:51:45 · 6137 阅读 · 0 评论 -
vuex数据持久化——vuex-persistedstate(解决页面刷新stroe数据丢失问题)
我们存储在vuex里面的数据只是放在了浏览器缓存里面,页面刷新就会丢失。当然也可以通过vuex存储到本地,再去获取也可以实现页面刷新数据不丢失。本篇主要讲解vuex-persistedstate这个插件,原理同上,只不过不需要去手写存储的代码,根据简单的配置就可以实现。...原创 2022-08-10 19:16:06 · 1314 阅读 · 2 评论 -
Vue使用swiper(5.2.0版本,避免踩坑)
如果你还在用swiper@3.0版本,如果你还在为坑多解决不了而烦恼,(ps:我已经踩了好多天的坑了)那么你不妨静下心来看完这篇博客,相信你会选择5.0版本的!!!满足以下需求:二、创建轮播图组件CarouselContainer.vue,详细解析在代码注释中三、创建父组件Father.vue渲染多个swiper组件、模拟异步数据变化完成之后就可以在你的项目中看到效果啦,之后可以根据项目需求去改进…...............原创 2022-08-09 23:25:15 · 3867 阅读 · 0 评论 -
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
其实 $attrs和 $listeners相当于是一个中转,主要用在父亲组件上。爷组件和孙组件保持以前的使用即可!原创 2022-08-08 10:36:08 · 1817 阅读 · 0 评论 -
Failed to load resource: the server responded with a status of 404 (Not Found)
无法加载资源:服务器响应状态为404(未找到),出现了该错误后,可以打开项目根目录下的vue.config.js文件,然后将。用 npm run serve 打包时,出现了下边这种报错信息。然后再重新build即可。原创 2022-08-05 14:41:31 · 19669 阅读 · 0 评论 -
VUE的watch和computed执行顺序
VUE的watch和computed执行顺序原创 2022-08-03 21:05:17 · 1752 阅读 · 0 评论 -
解决按照Element官网步骤按需引入组件运行时报错:Error: Cannot find module ‘babel-preset-es2015‘
按照官网步骤修改 .babelrc 文件时,注意:用vue脚手架创建的项目是找不到 .babelrc文件的,这是旧版本的脚手架才有的,新版本在vue脚手架创建的 babel.config.js 文件修改即可。除了安装element-ui之外还要借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。原因是旧版本的脚手架用的是 es2015,新版本不再适用,而官网没有及时更新。这个是可以的,但是你要注意自己的脚手架版本。主要讲解按需引入碰到的坑及报错。...原创 2022-08-03 20:52:35 · 1299 阅读 · 0 评论