attr ice remove rem temp 出現 js開發 模塊 spl

原因： 在使用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來實現避免。 例： #v-cloak 用法：這個指令保持在元素上直到關聯實例結束編譯。這個指令可以隱藏未編譯的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不會有這種閃爍的情況。

解決vue解析出現閃爍