防止vuejs在解析時出現閃爍

---## 防止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 標籤直到實例準備完畢。

1 [v-cloak] {
2   display: none;
3 }
4 
5 <div v-cloak>
6   {{ message }}
7 </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不會有這種閃爍的狀況。