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


Posted in Javascript onSeptember 19, 2016

原因:

在使用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不会有这种闪烁的情况。

以上所述是小编给大家介绍的vuejs在解析时出现闪烁的原因及防止闪烁的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 #Javascript
详解Node.Js如何处理post数据
Sep 19 #Javascript
React Native实现简单的登录功能(推荐)
Sep 19 #Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 #Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 #Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 #Javascript
Node.js的基本知识简单汇总
Sep 19 #Javascript
You might like
国内php原创论坛
2006/10/09 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python 的 Socket 编程
2015/03/24 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
公司中秋节活动方案
2014/02/12 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
个人年终总结怎么写
2015/03/09 职场文书
赢在中国观后感
2015/06/02 职场文书
初中生活随笔
2015/08/15 职场文书
python 如何用terminal输入参数
2021/05/25 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server