- 博客(29)
- 收藏
- 关注
RSS订阅原创 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关注的人