Mustache
如何將data中的文本數據，插入到HTML中呢？
之前文章中已經講過，可以通過Mustache語法（也就是雙大括號）。
Mustache：胡須，因為左右兩個大括號像兩個胡須一樣，這是國外人的翻譯，在國內也可以叫雙大括號
我們可以像下面這樣來使用，並且數據是響應式的。
<div id="app">
<h1>{{message}}</h1>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
message:'simple'
}
})
</script>
v-once
在某些情況下，我們可能不希望界面隨意的跟隨改變，這個時候，我們就可以使用一個Vue命令
v-once：
- 該指令后面不需要跟任何表達式（比如v-for后面是有跟表達式的）
- 該指令表示元素和組件（組件后面會寫）只渲染一次，不會隨着數據的改變而改變。
代碼如下：
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>{{message}}</h1>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
v-html
某些情況下，我們從服務器請求的數據本身就是一個HTML代碼
如果我們直接通過{{}}來輸出，會將HTML代碼也一起輸出，但是我們可能希望的是按照HTML格式進行解析，並且顯示對應的內容。
如果我們希望解析出HTML展示
可以使用v-html指令，在該指令后面往往會跟上一個string類型，會將string的html解析出來並且進行渲染
<div id="app">
<h1>{{link}}</h1>
<h1 v-html="link"></h1>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
link:'<a href="https://www.baidu.com">百度一下</a>'
}
})
</script>
v-text
v-text作用和Mustache比較相似，都是用於數據顯示在界面中，v-text通常情況下，接受一個string類型
<div id="app">
<h1 v-text="name"></h1>
<!-- 如果使用了v-text指令，那么我們在標簽中寫入的內容將會被覆蓋，所以它並不是特別靈活 -->
<!-- <h1 v-text="name">，你好</h1> -->
<h1>{{name}}</h1>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
name:'simple'
}
})
</script>
v-pre
v-pre用於跳過這個元素和它之元素的編譯過程，用於顯示原本的Mustache語法，比如下面的代碼：
- 第一個h1元素中的內容會被編譯解析出來
- 第二個h1元素中會直接顯示{{message}}
<div id="app">
<h1>{{message}}</h1>
<h1 v-pre>{{message}}</h1>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
message:'simple'
}
})
</script>
v-cloak
在某些情況下， 我們瀏覽器可能會直接顯示出未編譯的Mustache標簽。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- v-once：當頁面加載完只把我的數據第一次展示出來就可以了，后面數據改變不改變頁面數據 -->
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script type="text/javascript">
// 延時1秒鍾加載數據
// 在vue解析之前，div中有一個屬性v-cloak
// 在vue解析之后，div中沒有屬性v-cloak
setTimeout(function(){
var vue = new Vue({
el:'#app',
data:{
message:'simple'
}
})
},1000)
</script>
</body>
</html>