v-cloak-Vue从入门到实战

v-cloak

v-cloak指令

用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			[v-cloak] {
			  display: none;
			}
		</style>
		<script src="vue.js" ></script>
	</head>
	<body>
		<div id="demo">
			<span>{{message}}</span>
			<span v-cloak>{{message}}</span>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:"#demo",
				data:{
					message:"hello vue"
				}
			});
		</script>
	</body>
</html>

预览：https://ityanxi.github.io/Vue-tutorial/chapter04/12v-cloak.html