vuejs在解析时出现闪烁的原因及防止闪烁的方法
原因:
在使用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在解析时出现闪烁的原因及防止闪烁的方法的更多相关文章
- 防止vuejs在解析时出现闪烁
---## 防止vuejs在解析时出现闪烁 ## 原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或 ...
- vue 解析时表达式闪烁的问题
现象: 在使用 vuejs.angularjs 开发时,经常会遇见浏览器页面闪现表达式 ({{ express }} ), 或者是模块(div)的闪烁. 原因: 由于 JavaScript 去操作DO ...
- 无法启动T-SQL调试。未能连接到计算机"."。这是在主机名解析时通常出现的暂时错误……
今天在按在SSMS中,按F11进行断点调试时,弹出错误:"无法启动T-SQL调试.未能连接到计算器".".这是在主机名解析时通常出现的暂时错误--", 如下图: ...
- Java byte类型转换成int类型时需要 & 0XFF的原因
Java byte类型转换成int类型时需要 & 0XFF的原因 假设有byte b = -1; 那么b的二进制是:1111 1111. 如果将b直接转换为int类型,那么二进制是 1111 ...
- 【翻译自mos文章】使用aum( Automatic Undo Management) 时遇到 ORA-01555错误--- 原因和解决方式。
使用aum( Automatic Undo Management) 时遇到 ORA-01555错误--- 原因和解决方式. 參考原文: ORA-01555 Using Automatic Undo M ...
- DNS 服务器无法正常解析时,可以尝试这样!
DNS 服务器无法正常解析时,可以尝试这样! ========================================================================联通:12 ...
- 无法开机 如果您的手机黑屏无法开机,可以按照以下方式操作尝试: 如果是,使用原装充电器或使用弱电流方式充电(例如使用电脑USB接口充电)充电15-30分钟后尝试重新开机;注意:电量过低引起的无法开机,刚插入充电器时可能不亮屏但呼吸灯闪烁状态。
https://www.mi.com/service/support/startup 无法开机 如果您的手机黑屏无法开机,可以按照以下方式操作尝试: 技术支持 如何刷机 无法开机 手机自动关机.重启 ...
- 在HttpClient请求的时候,返回结果解析时出现java.io.IOException: Attempted read from closed stream. 异常,解决
原因是EntityUtils.toString(HttpEntity)方法被使用了多次.所以每个方法内只能使用一次.
- 动态调用webservice时 ServiceDescriptionImporter类在vs2010无法引用的解决方法
[导读]ServiceDescriptionImporter是创建Web Service 时使用的类,它是引用继承System.Web.Services 当我将VS2005里写的一段代码放在VS201 ...
随机推荐
- clr via c# 运行时序列化
1,快速了解序列化----windows IO 系统,FileStream,BinaryFormatter,SoapFormatter--不支持泛型. public class SerializeRe ...
- EF CORE中复杂类型的映射
实体映射时,遇到复杂类型,可选择下述方法处理: NotMapped,跳过映射 在复杂类型上声明 [Owned],但仅限该复杂类型是全部由简单值类型组成的 自定义序列化方法 示例: IPInfo使用 ...
- search(0)- 企业搜索,写在前面
计划研究一下搜索search,然后写个学习过程系列博客.开动之前先说说学习搜索的目的:不是想开发个什么搜索引擎,而是想用现成的搜索引擎在传统信息系统中引进搜索的概念和方法.对我来说,传统的管理系统le ...
- BFC的语法
先说一下什么是BFC(Block Formatting Contexts) BFC:块级格式化上下文(独立的渲染区).通俗的说是块级元素布局逻辑或规则,想要触发BFC就要是块级元素,要不把它转为块级元 ...
- Git安装配置及第一次上传项目到GitHub
平时的学习工作少不了保存自己的Code到代码库,这里必须要使用到Git与GitHub. 1. 关于Git的安装 下载Git:下载地址:https://git-scm.com/downloads ...
- 4.python流程控制语句介绍
流程控制语句分类 1).顺序结构 2).判断结构 3).循环结构 判断结构 特点:如果 ... 否则 ... 格式一: ① if 条件表 ...
- 这 100 道 Python 题,拿去刷!!!
2020年,学 Python 还有价值吗? 根据 2020 年 2 月的 TIOBE 编程语言排行榜显示,Python仍然稳居第三位. 此排行榜排名基于互联网上有经验的程序员. 课程和第三方厂商的数量 ...
- javaSE学习笔记(17)---锁
javaSE学习笔记(17)---锁 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相关源码(本文中的源码来自JDK 8).使用场景进行举例,为读 ...
- modbus 协议说明及常用格式
--- 说明: modbus协议一般适用于一个主设备访问多个从设备的硬件开发环境,类似于zigbee网络中的一个路由器多个协调器的一对多模型. modbus常用的寄存器类型为 3X 保持寄存器和 4X ...
- ls, chgrp, chown, chmod
ls命令 [root@client ~]# ls -la 总用量 dr-xr-x---. root root 2月 : . dr-xr-xr-x. root root 2月 : .. -rwxrwxr ...