- 博客(29)
- 收藏
- 关注
原创 Vue生命周期
两者相同点:都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机,放在mounted请求有可能导致页面闪动(页面dom结构已经生成),但如果在页面加载前完成则不会出现此情况建议:放在create生命周期当中。created是在组件实例一旦创建完成的时候立刻调用,这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的触发时机上created是比mounted要更早的。从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
2023-11-30 16:31:40
82
原创 减少首屏渲染时间
资源加载优化 减少资源大小 代码压缩 Gzip 图片压缩 代码拆分 减少http请求次数 http强缓存 service worker离线缓存 本地存储 合并请求(nginx-http-concat模块、雪碧图等) 提高http请求响应速度 CDN http弱缓存 DNS prefetch http2 优化资源加载时机 按需加载(element-ui) 懒加载 预加载 优化资源、内容加载方式 客户端
2023-11-30 15:12:14
112
原创 导航路由守卫
基础写法//全局路由守卫router.beforeEach((to,from,next)=>{if(to.path=='/login'||to.path=='/moban'){next();}else{alert('您还没有登录,请先登录');next('/login');}})路由概念 : 当URL地址发生变化时候 浏览器地址相应的发生改变...
2023-11-24 10:05:58
77
原创 弹窗使用v-show校验表单内容,保留原来的数据
element dialog中有个属性,关闭弹框时销毁Dialog 中的元素 把destroy-on-close属性设置为true。:其实是因为v-show的特性,只是隐藏了弹框,并没有销毁,所以会导致输入的数据清空了,dom没有更新。:表单里有搜索的情况下,表单数据清空,里面的内容还在。:dialog使用v-show控制表单显隐。
2022-11-11 11:23:45
408
1
原创 element的form表单关闭自动填充
给el-form添加autocomplete =‘off’ 关闭自动填充。后台管理登录页面输入账号密码,输入框会缓存上一次的数据。
2022-08-09 10:05:09
1077
原创 前端字典表定义查询
封装成公用的变量,以便于后期使用的时候不至于代码冗余。字典表顾名思义,和后端约定的或者有些固定的值,可以封装到一个文件里面集中管理,使用时直接引入文件,return出去就可以直接使用了,下面来看下具体代码:一定要注册,如果导出的是对象就在data中注册,方法要在method中注册;1. 创建字典表并导出变量/方法// 字典表const sexMap = { '1':{sex:'男',color:'blue'}, '2':{sex:'女',color:'pink'}}cons
2022-05-28 01:10:40
1375
原创 vue路由模式
vue-router有两种模式:hash和history。Hash模式hash模式是一种把前端路由的路径用井号#拼接在真实url后面的模式。当井号#后面的路径发生变化时,浏览器并不会重新发起请求,而是会触发onhashchange事件。url的属性属性 含义 location.protocal 协议 location.hostname 主机名 location.host 主机 location.port 端口号 ...
2022-04-29 11:39:23
409
原创 vue单向数据绑定和双向数据绑定
一、总结vue中有2种数据绑定的方式:单向数据绑定(v-bind):数据只能从data流向页面; 双向数据绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data;备注:双向数据绑定一般都应用在表单类(输入类)元素上(如:input、select等); v-model:value可以简写为v-model,因为v-model默认收集的就是value的值;二、分析单向数据绑定:就是把Model绑定到View,当我们用JavaScript代码更新Model时,Vie.
2022-04-06 22:48:21
9156
2
原创 git 主线分支代码拉取到本地分支
1.首先,正常情况下提交代码的流程是:git status --> git add . --> git commit -m "提交内容" --> git pull origin dev分支解决冲突(如果文件有冲突,需要重新 add commit)--> git push origin dev分支2.创建本地分支 先查看分支: git branch 查看本地分支git branc...
2021-12-23 10:52:18
2936
原创 Vue新cli 脚手架的坑
在使用vue-cli脚手架创建项目的时候,在cnpm create app命令后,项目创建成功后通过npm run serve命令运行以后, 控制台报错,sockjs.js?9be2:1606 GET http://192.168.16.105:8080/sockjs-node/info?t=1574662800493 net::ERR_CONNECTION_TIMED_OUT 错误分析:sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、
2021-08-11 16:56:19
150
原创 $route 和 $router 的区别?
可以理解为,一个是用来获取路由信息的,一个是用来操作路由的$routeroute是路由信息对象,里面主要包含路由的一些基本信息,包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom$routerrouter是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等VueRouter 子路由跳转很爱报错 尝试这种方法路由报错 官方解决办法constoriginalPus...
2021-08-11 16:51:50
183
1
原创 Vue router-link 对比a标签
Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的区别呢?官方中给出的解释是这样的: <router> 比起写死的 <a> 会好一些,理由如下:无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9低版本浏览器也会有好的兼容。总结:.
2021-08-11 16:47:52
797
原创 vue父子组件之间传值
父组件向子组件传递数据 (使用props向子组件传递数据)父组件<!-- 父组件 --><template> <div class="test"> <pageNo :logo="logoMsg"></pageNo> </div></template><script>import pageNo from '../components/pageNo'expo..
2021-08-04 09:40:08
78
翻译 vue路由出口 二次进入页面组件 不执行created和mounted生命周期钩子
页面调用一次接口,第二次缓存之前的数据,没有渲染页面;不会销毁再创建组件而是会复用组件,页面不会刷新。解决:方法一:实践成功官方推荐的使用watch监听路由变化,组件中监听注意:watch监听路由变化,我们的路由一定要有子路由,监听变化也紧局限在父子路由中,也就是我们这个路由一定要有子路由,在子路由跳转过程中会调用watch,能成功监听watch: { $route(to) { if (to.path=='') { ... }
2021-07-27 12:23:34
3073
原创 备忘录demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>备忘.
2021-07-04 20:16:30
109
原创 v-show与v-if区别
1. v-show不管初始的条件是什么,元素总是会被渲染,并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。2. v-if会根据初始的条件(data里自己的定义的数据)来进行真正的渲染(组件真正的销毁和重建),如果条件为真,才会开始渲染条件块,如果条件为假,则不会渲染条件块。总结共同点:v-if和v-show都是通过判断绑定数据的true\false来展示的不同点:v-if只有在判断为true的时候才会对数据进行.
2021-06-23 10:39:06
137
原创 v-if 和 v-for不能同时使用的原因以及解决方法
1.首先,v-for循环是作用在dom节点上的,如果同时使用的话,编译器会直接报错,告诉你v-if和v-for不能同时使用;2.当和 v-for 一起使用时,v-for 的优先级比 v-if 更高;<div v-for="item in list" v-if="item .active" :key="item.id"></div> 以上代码将会经过如下运算this.list.map( item=> { if (ite
2021-06-23 10:37:55
13561
7
原创 多个页面白屏优化以及图片缓存优化
1.多个页面白屏优化首先,在public公共文件下index.html中编写需要加载的图片;先样式给display:none;需要判断是在哪个页面展示出来,用正则判断或者window.location.pathname打印出在哪个页面;然后,使用window.location.pathname.indexOf("/residenceApplication")判断这个字段是否存在判断写好之后,需要在该优化数据加载完毕之后,把它隐藏掉;因为这里是vue3页面,直接写的..
2021-06-22 22:21:25
212
原创 call、aplay 和 bind 三者之间的区别?
首先,先说下this指向:this指向:his指向 = 谁调用,指向谁(这是错误的!!!)
2021-06-18 15:39:18
10509
6
原创 element-ui中单独引入Message,MessageBox组件的问题
import Message from './src/main.js';export default Message;
2021-06-15 11:24:48
2190
1
原创 vue 逻辑js代码是白色?
1.首先不要慌2.点击右下角Vue-html3.选中html ( 也可以手动输入html)4.就会变成彩色的啦over,over.......
2021-06-06 21:31:12
922
原创 移动端rem适配
postcss-pxtorem是一款postcss插件,yomh1.使用postcss-pxtorem动态设置rem基准值(html标签的字体大小)
2021-06-06 21:22:28
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人