版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bloak学习</title>
<!--放在此处会加载慢-->
<!-- <script src="./vue.js"></script> -->
<script>
//只要用到了v-cloak属性的元素都默认隐藏
{v-cloak}{
display:none;
}
</script>
</head>
<body>
<div id="app">
<!--v-cloak和v-text的区别
1、默认的情况下，v-cloak有{{}}闪烁问题，v-text没有
2、v-cloak可以在{{message}}前后放置任意内容，并且可以输出显示
3、v-text加载时先加载h4标签元素内容，后加载指令内容，并且指令内容覆盖元素内容
-->
<p v-cloak>{{ message }}</p>
<h4 v-text="message"></h4>
<!--
1、msg2会把<h1>作为字符串输出，不能解析<h1>标签
2、v-text也是把<h1>作为字符串输出
3、v-html会解析<h1>,能作为页面元素输出
（其他特性：
加载时先加载页面元素内容，后加载指令内容，并且指令内容覆盖元素内容
）
-->
<div>{{message2}}</div>
<div v-text="message2"></div>
<div v-html="message2"></div>
</div>
</body>
</html>
<!--先加载{{}}后加载数据-->
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'message',
message2:'<h1>我是message2</h1>'
}
});
</script>