现象:

  在使用 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. Python Excel文件的读写操作(xlwt xlrd xlsxwriter)

    转:https://www.cnblogs.com/ultimateWorld/p/8309197.html Python语法简洁清晰,作为工作中常用的开发语言还是很强大的(废话). python关于 ...

  2. Hello TypeScript

    ⒈TypeScript简介 1.JavaScript的超集 2.支持ECMAScript6标准,并支持输出ECMAScript3/5/6标准的纯JavaScript代码 3.支持ECMAScript未 ...

  3. java对象序列化并存储到文件中

    ● 如何将一个Java对象序列化到文件里 使用输入输出流,,一个是ObjectOutputStream 对象,ObjectOutputStream 负责向指定的流中写入序列化的对象.当从文件中读取序列 ...

  4. java关键知识汇总

    1.泛型理解 2.java或Java框架中常用的注解及其作用详解 3.三层架构和MVC的区别 4.jdk1.8手册(提取码:bidm) 5.Rocketmq原理&最佳实践 6.spring入门 ...

  5. SQL连接(join)

    INNER JOIN:如果表中有至少一个匹配,则返回行 LEFT JOIN:即使右表中没有匹配,也从左表返回所有的行 RIGHT JOIN:即使左表中没有匹配,也从右表返回所有的行 FULL JOIN ...

  6. 使用js输出1000以内的水仙花数

    什么是水仙花数 水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI).自恋数.自幂数.阿姆斯壮数或阿姆斯特 ...

  7. JavaScript之排序算法

    一.冒泡排序 原理:1.比较相邻的元素.如果第一个比第二个大,就交换两个数:2.对每一对相邻元素重复做步骤一,从开始第一对到结尾的最后一对,该步骤结束会产生一个最大的数:3.针对所有的数重复以上的步骤 ...

  8. 12-factor应用和微服务架构应用的区别

    SAP云平台的帮助文档很多时候将12-factor应用和微服务架构的应用相提并论. 然而从Allan Beck和John Mcteague的Cloud成熟度模型概念里,12-factor应用从成熟度上 ...

  9. 2.3 使用 dom4j 对 xml文件进行 dom 解析

    // 使用dom4j对XML文档进行解析 CRUD public class Demo1 { //读取XML文档中第二本书的书名 <书名>javaWEB</书名> @Test ...

  10. go语言入门(9)文本文件处理

    1,字符串处理 字符串在开发中经常用到,包括用户的输入,数据库读取的数据等,我们经常需要对字符串进行分割.连接.转换等操作,我们可以通过Go标准库中的strings和strconv两个包中的函数进行相 ...