一久脯、mustache插值表達式
即兩個大括號（{{}}）晒骇，在標簽元素內(nèi)容中使用霉撵，傳入變量，顯示Vue對象data中的值洪囤。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表達式顯示data中內(nèi)容 -->
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
瀏覽器顯示
二徒坡、v-cloak
網(wǎng)速慢時，頁面會閃現(xiàn)標簽里插值表達式瘤缩，例如{{ msg }}喇完。使用v-cloak，還沒渲染完時有這個屬性的的樣式設(shè)為隱藏款咖，渲染完v-cloak標簽會自動消失變回顯示何暮。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak，解決插值表達式的閃爍問題 -->
<p v-cloak>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
三铐殃、v-text
和插值表達式相似海洼，渲染標簽內(nèi)容。
初始標簽內(nèi)沒內(nèi)容富腊，不會出現(xiàn)插值表達式的閃爍問題坏逢。
v-test對應的數(shù)據(jù)會完全覆蓋標簽中的內(nèi)容；插值表達式只會替換自己的占位符赘被，其他內(nèi)容不變是整。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>++++{{ msg }}----</p> <!-- 閃爍問題；內(nèi)容只會替換插值表達式民假，其他不變 -->
<p v-text="msg">++++----</p> <!-- 無閃爍問題浮入；內(nèi)容會全部覆蓋標簽中內(nèi)容 -->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
四、v-html
v-html對應的數(shù)據(jù)會完全覆蓋標簽中的內(nèi)容羊异，但會把對飲數(shù)據(jù)當作html解析到頁面上事秀，而插值表達式和v-text只會把數(shù)據(jù)當作普通文本加載到頁面上。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>我是一個html標簽野舶！</h1>'
}
})
</script>
</body>
</html>
