>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、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英文是斗篷、披风的意思。是不是也比较形象呢，我先用斗篷把自己盖起来，等我化好妆了再出来见人。 `