>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、Mustache的一個小Bug 要學習本節內容之前，我們先來看一下Mustache的一個小Bug ``` <div id="app"> <h2>你好啊，{{message}}</h2> </div> ... data: { // 定義數據 message: 'VUE' } ... ``` 使用“第一個VUE程序章節”的代碼示例，瀏覽器由于網速的問題，可能會在渲染Mustache數據的時候發生延遲，導致一瞬間會先顯示`你好啊，{{Mustache}}`，而不是`你好啊，VUE`。仔細看下面的動圖  我們可以使用Chrome瀏覽器，來模擬這個閃屏的問題。F12->NetWork->Slow 3G(慢速3G網絡)  ## 二、使用v-text解決閃屏的問題  * 注意` <h2 v-text="message"></h2>`這里，我們使用v-text代替了`你好啊，{{message}}`，從而解決了閃屏的問題。 * 但是要注意v-text并不支持這種寫法`<h2 v-text="你好啊，message"></h2>`，這樣寫VUE會將`你好啊，message`看做插值去data里面找數據屬性定義，而我們只定義了`message`。所以，在一定程度上v-text失去了{{}}使用語法的靈活性。 * 其他的使用方法v-text和{{}}是基本一致的 ## 三、使用v-cloak解決閃屏的問題 如果我們既想使用`<h2>你好啊，{{message}}</h2>`這種定義方式的靈活性，又想解決閃屏的問題我們怎么做呢？  * 使用v-cloak指令并為該指令設置`display：none`的樣式，二者結合使用表示在h2的Dom節點渲染完成之前不顯示`你好啊，{{message}}`,渲染完成之后顯示`你好啊，VUE` * 另外要注意：樣式的定義要放在head標簽里面，否則因為瀏覽器渲染順序的差異，有可能不會生效。 * 另外要注意：cloak不是clock，cloak英文是斗篷、披風的意思。是不是也比較形象呢，我先用斗篷把自己蓋起來，等我化好妝了再出來見人。 `