구문 분석 중에 vuejs가 깜박이는 것을 방지합니다.

---## 구문 분석 중 vuejs가 깜박이는 것을 방지 ##

이유:
vuejs, anglejs를 사용하여 개발하다 보면 Chrome 등의 브라우저에서 빠르게 구문 분석할 수 있는 표현식({{ express }})이나 모듈(div)이 깜박이는 경우가 종종 있습니다. 이 문제의 경우 JavaScript는 DOM을 작동할 때 DOM 로딩이 완료(DOM 준비)될 때까지 기다립니다. vuejs 및 anglejs의 경우 DOM이 준비된 후 html 보기 템플릿을 구문 분석하기 위해 돌아가므로 Chrome과 같은 빠른 브라우저의 경우 깜박임을 볼 수 있습니다. 구문 분석 속도가 약간 느린 IE7 및 8과 같은 브라우저의 경우 대부분의 경우 이 문제가 발생하지 않습니다.

해결책:
V-cloak과 ng-cloak은 vuejs와 anglejs에서 제공되어 깜박임을 방지하는 동시에 Bing 텍스트({{ express }})를 변경할 수도 있습니다. v-bind의 경우 ng-bind를 피하십시오.

다음은 vuejs를 예로 들어 설명합니다.

<code>#v-cloak
用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：</code>

<span style="color: #008080;">1</span> <span style="color: #800000;">[v-cloak] </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;">3</span> }
<span style="color: #008080;">4</span> 
<span style="color: #008080;">5</span> <span style="color: #800000;"><div v-cloak>
</span><span style="color: #008080;">6</span>   {<span style="color: #ff0000;">{ message </span>}<span style="color: #800000;">}
</span><span style="color: #008080;">7</span> <span style="color: #800000;"></div></span>

<code><div> 不会显示，直到编译结束。

原理：

带有v-clock的的元素设置为display:none，隐藏掉，在等到vue解析到带有v-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防止节点的闪烁。


实例：</code>

<span style="color: #000000;">//example1:
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>{{price}}<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #000000;">

//example2: 
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">v-bind</span><span style="color: #0000ff;">="price"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #000000;">

//example3: 
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">v-cloak</span><span style="color: #0000ff;">></span>{{price}}<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>

<code>
上例子2和例子3实现的效果是一样的，而例子1在vuejs解析{{price}}之前，用户是可以看到"{{price}}"这个字符串的。而例子2和例子3不会有这种闪烁的情况。</code>