Vue
真是个老机灵鬼
这个作者很懒,什么都没留下…
展开
-
vue载入速度优化(打包放服务器后加载很慢)
把我优化vue载入速度的问题总结一下。我的博客项目放在服务器后加载要18-20秒,其实这个问题拖了很久了,昨天才有时间处理一下。之前以为是首页的mp4资源太大,但昨天看了后发现主要是vue打包后的js文件载入用了最多时间,如下图(优化前没截图,这个是优化后的。优化前大小是2m多,时间是十几秒)带宽合格的服务器其实2m的文件用不到十几秒的,但我买的带宽是1Mbps (穷是原罪),速度太慢。那么就从优化文件大小入手。步骤:1. 将路由改为懒加载,修改router文件如下图,之前的写法是红色箭头原创 2021-09-07 11:06:12 · 2619 阅读 · 0 评论 -
vue mixin
新建mixin文件夹,新建js文件export const log = { data(){ return { abc: "abc" } }, mounted(){ this.toLog() }, methods: { toLog(){ cons...原创 2020-05-07 17:16:23 · 200 阅读 · 1 评论 -
vue使用过滤器filter
全局filter,在main.js中写入一个名为add10的filterVue.filter('add10', function (value) { if (!value) return '' return value + 10})在html中使用<div class="content">{{num | add10 }}</div>...原创 2020-05-07 16:58:26 · 150 阅读 · 0 评论 -
vue自定义指令使用
这里举例全局指令比如要加一个名为v-color的指令,来让绑定的标签改变相应颜色在main.js中写入:Vue.directive("color", { inserted: function (el, binding) { let value = binding.value; el.style.color= value; }})inserted函数中,el参数指...原创 2020-05-07 16:36:41 · 231 阅读 · 0 评论 -
vue滚动触底加载更多
废话不多说,代码:```javascriptscrollBottom() { // console.log("可视高度: ", window.screen.height) // console.log("全文高度: ", document.body.clientHeight) // con...原创 2019-12-17 13:29:10 · 1663 阅读 · 0 评论 -
vue跨域
vue3 axios跨域在vue.config.js中配置如下(没有的话在根目录创建一个)module.exports = { devServer: { // 设置代理 proxy: { "/api": { target: "http://XXXX:8080/", // 后台的地址 ws: true, // 启用webs...原创 2019-07-16 14:13:52 · 133 阅读 · 0 评论 -
vue改变data里的值后页面渲染没有改变
vue改变data里的值后页面渲染没有改变用深拷贝let name2 = JSON.parse(JSON.stringify(this.name));//执行完业务代码后this.name = name2原创 2019-07-18 14:07:48 · 3245 阅读 · 0 评论 -
javascript时间戳转日期格式
javascript时间戳转指定日期格式// 格式化日期,如月、日、时、分、秒保证为2位数 formatNumber (n) { n = n.toString(); return n[1] ? n : '0' + n; }, // 参数number为毫秒时间戳,format为需要转换成的日期格式 formatTime (number, f...转载 2019-07-11 13:45:52 · 229 阅读 · 0 评论 -
Vue实现弹幕功能
写在前:这个功能不是常规视频弹幕,是音频与图片配合;一个课时对应一个弹幕包,一个课时多张图片,弹幕包里包含与各音频与图片相对应的弹幕,且页面切换比较频繁,所以也相对繁琐。效果图发送时间间隔限制:大致流程图:一、弹幕组件弹幕功能肯定要写个组件的,后期也好维护优化;组件组要负责弹幕的过渡动画效果,弹幕样式,暂停等;1.弹幕位置;暂定弹幕最多三行,在页面顶部;那么要获取父页...原创 2019-07-05 18:34:56 · 12182 阅读 · 1 评论 -
vue - element表格组建实现slot自定义数据为空时的显示内容
项目是个二级表格,点击标题进入下层表格:进入二层后如下,可以点所属课程返回上层但二级数据为空时的显示效果,如下,就没办法返回了,需要自己自定义实现返回功能element文档是这么写的:可以用slot实现自定义内容代码:<template slot="empty" > <div>暂无数据 <el-bu...原创 2019-06-28 14:05:35 · 11298 阅读 · 0 评论