vue 解析时表达式闪烁的问题
现象:
在使用 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 解析时表达式闪烁的问题的更多相关文章
- 防止vuejs在解析时出现闪烁
---## 防止vuejs在解析时出现闪烁 ## 原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或 ...
- vuejs在解析时出现闪烁的原因及防止闪烁的方法
原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Java ...
- 解决vue解析出现闪烁
原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于Jav ...
- vue刷新页面出现闪烁
在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...
- VUE基础插值表达式
vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...
- 使用mx:Repeater在删除和添加item时列表闪烁
使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...
- 解决JSP 不解析EL表达式
解决JSP 不解析EL表达式,jsp在使用EL表达式的时候发现它不被解析,而是直接以字符串的形式显示了出来,经过查阅资料和实践,终于得知了原因并找到了解决方案 原因是:在默认情况下,Servlet 2 ...
- ListView用法及加载数据时的闪烁问题和加载数据过慢问题
ListView介绍及添加数据时的闪烁问题 1. ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...
- listview滚动时背景闪烁,背景黑或白问题解决
android在使用listview时出现滚动时背景闪烁,变成背景黑或白的问题这样处理: 1:在布局文件中listview标签中加入: android:cacheColorHint="#00 ...
随机推荐
- SpreadJS:一款高度类似Excel的开发工具,功能涵盖Excel的 95% 以上
Excel 作为一款深受用户喜爱的电子表格工具,借助其直观的界面.出色的计算性能.数据分析和图表,已经成为数据统计领域不可或缺的软件之一. 基于Excel对数据处理与分析的卓越表现,把Excel的功能 ...
- Ember.js和Vue.js,哪种框架更适合你?
JavaScript最初是为Web应用程序而创建的.随着前端技术的发展,比起纯JavaScript 脚本,大多数开发人员更喜欢使用基于JavaScript的框架来开发Web应用,如Vue.React等 ...
- 怎么才能记住java线程的start()和run()谁是启动方法
start()和run()开始的时候总是记不住那个是线程的启动方法,现在是记得很真切了! 如果用run()启动线程就跟不用线程效果是一样的,因为是run是顺序执行的.start()才是线程的启动方法. ...
- JavaScript(js)笔记
js注释 JavaScript注释与Java注释相同 // 单行注释 /* 多行注释 */ js五大基本类型: number(数值型).string(字符串性).boolean(布尔型).unde ...
- 怎样理解undefined和 null
前言: undefined表示 "未定义", null 表示 "空" 第一步: 一般在变量或属性没有声明或者声明以后没有赋值时, 这个变量的值就是undefin ...
- C# DataTable根据字段排序
DataTable dt = new DataTable(); dt.Columns.Add("Name"); dt.Columns.Add("Age");// ...
- Unity 屏幕坐标到UGUI RectTransform本地坐标的转换
public static bool ScreenPointToLocalPointInRectangle(RectTransform rect, Vector2 screenPoint, Camer ...
- 判断ubuntu是32位还是64位
在终端输入 sudo uname -m 显示 如果显示i686,你安装了32位操作系统 如果显示 x86_64,你安装了64位操作系统 更多: sudo uname -s 显示内核名字s sudo u ...
- java Calendar Date 获取指定日期所在月或年的第一天和最后一天
一.获取传入日期所在月的第一天 public static Date getFirstDayDateOfMonth(final Date date) { final Calendar cal = Ca ...
- 使用私有api统计ios app运行时间及次数
利用<iphone SprintBoard部分私有API总结>中提到的私有API,可以做很多越狱以前实现不了的事情. 比如,利用一个后台运行的app,监控该iphone上所有app的运行次 ...