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在解析时出现闪烁的原因及防止闪烁的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解vue数据渲染出现闪烁问题

    今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况.经过多方查找我知道了要解决这个问题需要添加v-cloak指令,这时有一个问题困扰了我很久,我明明按照大家所说的加了v-for为什么还是没有用.后来折腾了很久才发现原因,先不说为什么,看看代码来: 在html中: <ul v-for="item in person"> <li v-cloak>{{item.name}}</li> </ul>

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

    原因: 在使用vuejs.angularjs开发时,经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于vuejs.angularjs这些会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现.而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会

  • json解析时遇到英文双引号报错的解决方法

    有时解析json时,会碰到里面带有英文的双引号,导致解析错误,可以将json进行转义,一下: public static String htmlEscape(String input) { if(isEmpty(input)){ return input; } input = input.replaceAll("&", "&"); input = input.replaceAll("<", "<")

  • PHP写API输出的时用echo的原因详解

    写php API写的很少,最近才开始接口的写法,在框架里面一直用return,但是在api中retrun就失效了,为什么呢? 网友给出的答案: 1.return 一般用于函数或方法的返回. echo 才是输出(也就是显示) 如果你不输出,api有何作用. 2.return只能在php内部使用 对外,你要给别人解析,你就理解成输出,用echo 3.当然是echo了,如果是json最好加上header标识 <?php $ret = array( 'name' => 'fdipzone' ); he

  • 关于JavaScript实现动画时动画抖动的原因与解决方法

    关于JavaScript实现动画时动画抖动的原因与解决方法

    目录 使用定时器实现动画出现卡顿的原因 requestAnimationFrame 的前世今生 requestAnimationFrame VS setInterval 参考资料 总结 前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因 主要原因是浏览器无法确定定时器的回调函数的执行时机.以 setInterval 为例,当一个 setInterval 定时器被创建后,它的回

  • Java提示解析时已到达文件结尾的解决方法

    Java提示解析时已到达文件结尾怎么办?这里我们将给大家介绍详细的解决方法. 首先,找到已经编写好的文件,运行,看到控制台,给出如下提示. 向下查看控制台,看到控制台,给出如下提示. 接着,找到文件所在行,进行检查,检查该处是否有什么错误. 如果第二步没有检查到任何的错误,那么就是上个class类处出现了问题.向上一个类检查,就一定可以发现问题,主要是因为,解析时已到达文件结尾,是因为,在后一个类已经执行了,程序还没有结束. 然后,将第一类中却上的结尾符号"}"添加上,再次运行,发现程

  • 浅谈python 调用open()打开文件时路径出错的原因

    昨晚搞鼓了一下python的open()打开文件 代码如下 def main(): infile =open("C:\Users\Spirit\Desktop\bc.txt",'r') data = infile.read() print(data) main() 然而结果总报错invaild argument 或者cant found such file *** 查找问题后 发现是由于python中的 '\' 是转义符号,要想输出\ 的办法有两种 1 .在\后再加\ 就是\\ 的形式

  • Go中JSON解析时tag的使用

    目录 struct成员变量标签(Tag)说明 struct成员变量标签(Tag)获取 自定义tag 在处理json格式字符串的时候,经常会看到声明struct结构的时候,属性的右侧还有反引号括起来的内容.形如: type User struct { UserId int `json:"user_id" bson:"user_id"` UserName string `json:"user_name" bson:"user_name&qu

  • C++ STL标准库std::vector扩容时进行深复制原因详解

    目录 引子 查找原因 解决方法 结论 引子 但是笔者却发现了一个奇怪的现象,std::vector扩容时,对其中的元素竟然进行的是深复制.请看示例代码: #include <iostream> #include <vector> struct Test { Test() {std::cout << "Test" << std::endl;} ~Test() {std::cout << "~Test" <

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • json格式解析和libjson的用法介绍(关于cjson的使用方法)

    json格式解析和libjson的用法介绍(关于cjson的使用方法)

    在阅读本文之前,请先阅读下<Rss Reader实例开发之系统设计>一文. Rss Reader实例开发中,进行网络数据交换时主要使用到了两种数据格式:JSON与XML.本文主要介绍JSON格式的简单概念及JSON在Rss Reader中的应用,XML格式的使用将在下一篇文章做介绍. JSON简介: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,可以把JSON的结构理解成无序的.可嵌套的key-value键值对集合,这些key-value键值对是

随机推荐