<!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>
