VUE解决初始化DOM时闪一下的问题

问题

---

 

vue页面在打开时会显示一些不需要显示的DOM结构或者{{}}等，而在加载完数据后便显示正常。

 

 

解决方案

---

 

（1）v-cloak

把v-cloak加在需要加载完数据后再显示的dom上，例如：

<div id="vueTest" v-cloak></div>

注意：必须结合CSS使用，在CSS中添加[v-cloak]{display:none;}

 

(2)文本尽量使用v-text

<span>{{vueTestWord}}<span>

改为

<span v-text="vueTestWord"><span>

 

(3)v-html(慎用，容易导致XSS攻击)

 

 

出现原因

---

 

这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready），对于vuejs、angularjs这些会在DOM ready完后才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现，而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。