vue刷新页面时去闪烁提升用户体验效果的实现方法


Posted in Javascript onDecember 10, 2018

首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true

随后添加provide()以及reload方法,如下:

export default {
 provide() {
  return {
  reload: this.reload
  }
 },
 data(){
 isReloadAlive : true
 },
 methods: {
 reload() {
   this.isReloadAlive = false;
   this.$nextTick(function(){
    this.isReloadAlive = true;
   })
  }
 }

最后调用this.reload()即可

补充:下面看下vue解决刷新时闪烁问题

1.在vue容器的div里面加上 v-cloak

<div id="app" v-cloak>

2.样式文件中加上

<style type="text/css">
  [v-cloak] {
   display: none !important;
  }
 </style>

总结

以上所述是小编给大家介绍的vue刷新页面时去闪烁提升体验方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 #Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
You might like
PHP技术开发技巧分享
2010/03/23 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jQuery 1.0.2
2006/10/11 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
jquery实现图片放大镜效果
2020/12/23 jQuery
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
scrapy头部修改的方法详解
2020/12/06 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
运动会通讯稿300字
2014/02/02 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书