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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
判断访客终端类型集锦
Jun 05 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
支付宝小程序tabbar底部导航
Nov 06 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
Java中final关键字详解
2015/08/10 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
js函数排序的实例代码
2013/07/01 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
解决python 找不到module的问题
2020/02/12 Python
python退出循环的方法
2020/06/18 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
中学生打架检讨书
2014/02/10 职场文书
吨的认识教学反思
2014/04/27 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript