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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
react结合bootstrap实现评论功能
May 30 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编写一个简单的路由类
2011/04/13 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php计算税后工资的方法
2015/07/28 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
老生常谈python中的重载
2018/11/11 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
详解python中index()、find()方法
2019/08/29 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
Delphi工程师笔试题
2013/09/21 面试题
求职简历自荐信范文
2013/10/21 职场文书
自我评价200字分享
2013/12/17 职场文书
广告宣传策划方案
2014/05/21 职场文书
2014年社区工作总结
2014/11/18 职场文书
小人国观后感
2015/06/11 职场文书
《叶问2》观后感
2015/06/15 职场文书
执行力心得体会范文
2016/01/11 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
字节飞书面试promise.all实现示例
2022/06/16 Javascript