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 ...
随机推荐
- HDU 3047 带权并查集 入门题
Zjnu Stadium 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3047 Problem Description In 12th Zhejian ...
- Ubuntu系统降内核
本人安装的Ubuntu16.04.6系统原生内核为4.15.0,但安装的应用仅支持4.8.0以下内核,因此需要降内核.PS:降内核有风险,操作前请慎重 1.查看可用的内核 输入命令查看已经可用的内核 ...
- 序列化,os,sys,hashlib,collections
序列化,os,sys,hashlib,collections 1.序列化 什么是序列化?序列化的本质就是将一种数据结构(如字典,列表)等转换成一个特殊的序列(字符串或者bytes)的过程就叫做序列化. ...
- 11-MySQL DBA笔记-MySQL的监控
第11章 MySQL的监控 为什么我们需要监控呢?因为如果没有了监控,那么我们的服务可用性就无从度量,我们也无法及时地发现问题和处理问题.一个完善的监控体系,不仅需要进行实时的监控,也需要分析历史的监 ...
- MySQL设置自增字段
1.MySQL每张表只能有1个自增字段,这个自增字段即可作为主键,也可用作非主键使用,但是请注意将自增字段当做非主键使用时必须为其添加唯一索引,否则系统将会报错 )将自动增长字段设置为主键 CREAT ...
- 初学java3 条件判断
三目运算符 条件? 正确结果:错误结果 if判断 单一条件判断 if(条件){ }else{ } 多种条件判断 if(){ }else if(){ } ... else{ } switch判断 swi ...
- ef core many to many
https://stackoverflow.com/questions/46184678/fluent-api-many-to-many-in-entity-framework-core/461847 ...
- LeetCode 腾讯精选50题-- 买卖股票的最佳时机 II
贪心算法: 具体的解题思路如下: II 的解题思路可以分为两部分, 1. 找到数组中差值较大的两个元素,计算差值. 2. 再步骤一最大的元素的之后,继续遍历,寻找差值最大的两个元素 可以得出的是,遍历 ...
- React会自动把虚拟DOM数组展开
React会自动把虚拟DOM数组展开,放在父级虚拟DOM中,这个特性还是我同事帮我解决一个问题的时候,偶然发现的. 如何将一个数据数组转换为一个虚拟DOM的数组,需要使用map,如下: const n ...
- ORACLE数据库 自动备份 定时计划任务 windows
疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...