Vue基本指令v-cloak的使用

v-cloak不需要表達式，它會在Vue實例結束編譯時從綁定的HTML元素上移除，經常和 { display:none } 配合使用：

<div id="app" v-cloak>
	{{ message }}
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"這是一段文本"
		}
	})
</script>

這時雖然已經加了指令v-cloak，但其實並沒有起到任何作用，當網速較慢、Vue.js文件還沒有加載完時，在頁面上會顯示{{ message }}的字樣，直到Vue創建實例、編譯模板時，DOM纔會被替換，所以這個過程屏幕是有閃動的。只要加一句CSS就可以解決了：

[v-cloak] {
	display: none;
}

在一般情況下， v-cloak 是一個解決初始化慢導致頁面閃動的最佳實踐，對於簡單的項目很實用，但是在具有工程化的項目裏，比如使用 webpack 和 vue-router 時，項目的 HTML結構只有一個空的 div 元素，剩餘的內容都是由路由去掛載不同組件完成的，所以不再需要 v-cloak。

參考書籍：Vue.js實戰
提取碼：m9nb
或者掃描二維碼提取：