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

原因:

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索闪烁
, vue.js
vuejs防止闪烁
vue防止闪烁、vue 闪烁、vue.js 闪烁、vue.js初次渲染 闪烁、vue 渲染 闪烁,以便于您获取更多的相关知识。

时间: 2024-09-05 02:07:43

vuejs在解析时出现闪烁的原因及防止闪烁的方法_javascript技巧的相关文章

Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法_javascript技巧

遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input id="startTime" placeholder="请输入开始时间" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'

浏览器解析js生成的html出现样式问题的解决方法_javascript技巧

我实现的功能是添加标签,无刷新地添加到标签列表的最后,见下图中第二行,样式明显有问题 我反反复复地检查了chrome console的html结构,都是一样一样的,在IE和FF下我也认真比较过的,还是没有区别.见下图 同样的html结构,同样的style,竟然展现的样式差异很大,一时没了想法,像个无头苍蝇.索性我就把console下的html复制到notepad++进行对比,看出了一点端倪,见下图.左侧为js生成的html,右侧为页面(.aspx)中的html 引起样式差异的原因可能就是左侧缺少

解析arp病毒背后利用的Javascript技术附解密方法_javascript技巧

本文的目的是探讨JS相关技术,并不是以杀毒为主要目的,杀毒只是为讲解一些JS做铺垫的,呵呵,文章有点长,倒杯咖啡或者清茶慢慢看,学习切勿急躁! 最近公司的网络中了这两天闹的很欢的ARP病毒,导致大家都无法上网,给工作带来了很大的不方便,在这里写下杀毒的过程,希望对大家能有帮助! 现象:打开部分网页显示为乱码,好像是随机的行为,但是看似又不是,因为它一直在监视msn.com,呵呵,可能和微软有仇吧,继续查看源代码,发现头部有一个js文件链接----<script src=http://9-6.in

js实现文字闪烁特效的方法_javascript技巧

本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码如下 <html> <head> <meta charset="gb2312" /> <title>js实现文字闪烁特效</title> </head> <script> var flag = 0; fun

调用jQuery滑出效果时闪烁的解决方法_javascript技巧

问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

网站导致浏览器崩溃的原因总结(多款浏览器) 推荐_javascript技巧

面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

手机软键盘弹出时影响布局的解决方法_javascript技巧

移动端软键盘弹出时影响布局该如何解决 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bo

PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法_javascript技巧

网站搬家的时候碰到的这个问题,因为数据一直是使用PhpMyAdmin工具来进行备份和恢复的,但是随着网站的数据越来越多,所以数据库也是越来越大,压缩后都还有4M的数据,而在PhpMyAdmin里将数据导入时就出错误提示了. 上图为PhpMyAdmin里的提示"没有接收到要导入的数据.可能是文件名没有提交,也可能是文件大小超出 PHP 限制.参见 FAQ 1.16.". 经过网络搜索一番找到了解决方法,原因是PHP默认限制上传文件为2M,而我们只需修改这个默认的限制即可. 操作方法:打开

javascript解析xml实现省市县三级联动的方法_javascript技巧

本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=