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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解JavaScript的变量
2019/04/04 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
解析Python的缩进规则的使用
2019/01/16 Python
python实现祝福弹窗效果
2019/04/07 Python
利用python开发app实战的方法
2019/07/09 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python如何将图片转换素描画
2020/09/08 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
小学毕业感言50字
2014/02/16 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
先进典型发言材料
2014/12/30 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python