现象:

  在使用 vuejs、angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁。

原因:

  由于 JavaScript 去操作DOM,都会等待 DOM 加载完成(DOM ready)。对于 vuejs、angularjs 这些会在 DOM ready 完会才回去解析 html view Template,所以对于 Chrome 这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的(没验证过....)。

解决办法:

  vuejs、angularjs中为我们提供了v-cloak、ng-cloak来实现防止闪烁的方案。

用法(vue 为例):

index.css :

[v-cloak] {
  display: none;
}

index.vue :

<div v-cloak>
{{ message }}
</div>

  直到 表达式编译完成,div 才会显示  

原理:

  带有 v-clock 的的元素设置为 display:none,隐藏掉,在等到 vue 解析到带有 v-clock 的节点时候,会把 attribute 和 class 同时remove掉,这样就可以实现防止节点的闪烁。  

注意:

  在实际使用中,v-for 循环数据时可能会遇到不起作用的现象,要把 v-clock 放在跟 v-for 同一个标签上,仅供参考。

vue 解析时表达式闪烁的问题的更多相关文章

  1. 防止vuejs在解析时出现闪烁

    ---## 防止vuejs在解析时出现闪烁 ## 原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或 ...

  2. vuejs在解析时出现闪烁的原因及防止闪烁的方法

    原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Java ...

  3. 解决vue解析出现闪烁

    原因:  在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Jav ...

  4. vue刷新页面出现闪烁

    在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...

  5. VUE基础插值表达式

    vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...

  6. 使用mx:Repeater在删除和添加item时列表闪烁

    使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...

  7. 解决JSP 不解析EL表达式

    解决JSP 不解析EL表达式,jsp在使用EL表达式的时候发现它不被解析,而是直接以字符串的形式显示了出来,经过查阅资料和实践,终于得知了原因并找到了解决方案 原因是:在默认情况下,Servlet 2 ...

  8. ListView用法及加载数据时的闪烁问题和加载数据过慢问题

    ListView介绍及添加数据时的闪烁问题 1.     ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...

  9. listview滚动时背景闪烁,背景黑或白问题解决

    android在使用listview时出现滚动时背景闪烁,变成背景黑或白的问题这样处理: 1:在布局文件中listview标签中加入: android:cacheColorHint="#00 ...

随机推荐

  1. Vue框架下实现导入导出Excel、导出PDF

    项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...

  2. linux中学习中提炼出来的命令

    Linux: 基于debain的系统(如:Ubuntu等)pms基本工具:aptitude[apt-get],dpkgaptitude search package_name 查看软件包是否已安装,如 ...

  3. 知乎Python后端面试总结

    一面 写个快速排序热热身,分析一下复杂度,如果不使用额外的空间,应该怎么写? 说一下Flask中g是怎么实现的,原理是什么? 说一下浏览器从输入url到页面渲染的过程,越详细越好: 了解web安全吗? ...

  4. Ural 1250 Sea Burial 题解

    目录 Ural 1250 Sea Burial 题解 题意 输入 题解 程序 Ural 1250 Sea Burial 题解 题意 给定一个\(n\times m\)的地图,\(.\)为水,\(\#\ ...

  5. 整体二分(模板二)动态区间第K大

    这才是更一般的二分写法--HDU5412 #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio>// ...

  6. [游戏复刻] 2048(2014. Android)

    等哪一天我有很多很多的时间再写吧...

  7. Linux挂载磁盘&kuoron

    1.添加磁盘 物理服务器直接插上硬盘即可,虚拟机的话给直接添加磁盘即可,不懂的可以自行百度,比较简单. 2.管理磁盘分区,fdisk命令. 在Linux系统中,管理硬盘设备最常用的方法就当属 fdis ...

  8. js图片压缩上传

    最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码 ...

  9. python学习-6 猜拳小游戏

    import random # 调用随机数模块 pc = random.randint(1,3) # 产生1-3的随机数 print("来玩个猜拳游戏吧!") a = '石头' b ...

  10. spring-boot-plusV1.2.3发布,CentOS快速安装环境/构建/部署/启动项目

    spring-boot-plusV1.2.3发布,CentOS快速安装环境/构建/部署/启动项目 [V1.2.3-RELEASE] 2019.09.09