原因:
在使用 vuejs,AngularJS 开发时, 经常会遇见在如 Chrome 这类能够快速解析的浏览器上出现表达式 ({{ express }} ), 或者是模块(div) 的闪烁. 对于这个问题由于 JavaScript 去操作 DOM, 都会等待 DOM 加载完成(DOM ready). 对于 vuejs,AngularJS 这些会在 DOM ready 完会才回去解析 html view Template, 所以对于 Chrome 这类快速的浏览器你会看见有闪烁的情况出现. 而对于 IE7,8 这类解析稍慢的浏览器大部分情况下是不会出现这个问题的.
解决方法:
在 vuejs,AngularJS 中为我们提供了 v-cloak,ng-cloak 来实现防止闪烁的方案, 同时对于 bing 文字 ({{ express }} ) 我们也可以改为 v-bind,ng-bind 来实现避免.
下面以 vuejs 为例:
#v-cloak
用法:
这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时, 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕.
示例:
- [v-cloak] {
- display: none;
- }
- <div v-cloak>
- {
- {
- message
- }
- }
- </div>
- <div> 不会显示, 直到编译结束.
原理:
带有 v-clock 的的元素设置为 display:none, 隐藏掉, 在等到 vue 解析到带有 v-clock 的节点时候, 会把 attribute 和 class 同时 remove 掉, 这样就可以实现防止节点的闪烁.
实例:
- //example1:
- <span>{
- {
- price
- }
- }</span>
- //example2:
- <span v-bind="price"></span>
- //example3:
- <span v-cloak>{
- {
- price
- }
- }</span>
上例子 2 和例子 3 实现的效果是一样的, 而例子 1 在 vuejs 解析 {{price}} 之前, 用户是可以看到 "{{price}}" 这个字符串的. 而例子 2 和例子 3 不会有这种闪烁的情况.
来源: http://www.bubuko.com/infodetail-3438103.html