vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)


Posted in Javascript onApril 20, 2018

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如

<div class="#app">
  <p>{{value.name}}</p>
</div>

在加载的时候会看到

{{value.name}}

在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak

那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,

<div class="#app" v-cloak>
  <p>{{value.name}}</p>
</div>

而且,在css里面要添加

[v-cloak] {
  display: none;
}

这样就可以防止页面闪烁了。

但是有的时候会不起作用,可能的原因有二:

1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级

[v-cloak] {
  display: none !important;
}

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中

补充:

下面看下Vue 中的 v-cloak 解读

v-cloak 的作用和用法

用法:

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API

<div id="app">
  {{msg}}
</div>

HTML 绑定 Vue实例,在页面加载时会闪烁

然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 Vue 实例

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak 可以解决这一问题,在 css 中加上

[v-cloak] {
 display: none;
}

在 html 中的加载点加上 v-cloak,就可以解决这一问题

<div id="app" v-cloak>
  {{msg}}
</div>

 Vue1.x 与 Vue2 中 v-cloak 的不同

Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 div 来容纳整个页面内容,对其进行实例化

这样在使用 v-cloak 时,同样需要用到这种方法

 为什么我用的 v-cloak 无效?

在实际项目中,我们常通过 @import 来加载 css 文件

@import "style.css"
@import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak] 写在 @import 加载的 css 文件中,就会导致页面仍旧闪烁。

为了避免这种情况,我们可以将 [v-cloak] 写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。

总结

以上所述是小编给大家介绍的vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
vue多页面开发和打包正确处理方法
Apr 20 #Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 #Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
Vue中如何实现proxy代理
Apr 20 #Javascript
React diff算法的实现示例
Apr 20 #Javascript
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
Javascript中typeof 用法小结
2015/05/12 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
1000字打架检讨书
2014/11/03 职场文书
业务内勤岗位职责
2015/04/13 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis