說說 Vue.js 中的 v-cloak 指令

摘要： 可以使用 v-cloak 指令設定樣式，這些樣式會在 Vue 例項編譯結束時，從繫結的 HTML 元素上被移除。 當網路較慢，網頁還在載入 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 原始碼。我們可以使用 v-cloak 指令來解決這一問題。...

可以使用 v-cloak 指令設定樣式，這些樣式會在 Vue 例項編譯結束時，從繫結的 HTML 元素上被移除。

當網路較慢，網頁還在載入 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 原始碼。我們可以使用 v-cloak 指令來解決這一問題。

html：

<div id="app">
{{context}}
</div>

js：

<script>
var app = new Vue({
el: '#app',
data: {
context:'網際網路頭部玩家鍾愛的健身專案'
}
});
</script>

效果：

我們使用 v-cloak 指令來解決螢幕閃動的問題吧O(∩_∩)O~

js 不變，在 div 中加入 v-cloak 指令。

html：

<div id="app" v-cloak>
{{context}}
</div>

css：

[v-cloak]{
display: none;
}

使用 v-cloak 指令之後的效果（ ofollow,noindex">demo ）：

在簡單專案中，使用 v-cloak 指令是解決螢幕閃動的好方法。但在大型、工程化的專案中（webpack、vue-router）只有一個空的 div 元素，元素中的內容是通過路由掛載來實現的，這時我們就不需要用到 v-cloak 指令咯。