Mustache語法
Mustache語法又稱作小鬍子語法（雙大括號語法），數據是響應式的
<body>
<div id="app">
<h2>HELLO {{book}}</h2> //插入到標籤中
<h2>{{book + price}}元</h2>
<h2>{{book}} {{price}}元</h2> //使用兩個小鬍子語法
<h2>{{price*2}}</h2> //可以是表達式
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
book:"哈利波特",
price:68
}
})
</script>
</body>
v-once
在某些情況下，我們可能不需要界面隨意地改變，只希望其只改變一次，這就要用到 v-once指令。
注意：
（1）該指令後面不需要跟任何表達式（例如v-for需要跟表達式）
（2）該指令表示元素和組件只渲染一次，不會隨着數據地改變而改變
<body>
<div id="app" v-once>
{{message}}
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:"hello vue"
}
})
</script>
</body>
v-html
某些情況下，我們從服務器請求到的數據本身就是一個HTML代碼，若直接通過大鬍子語法輸出，會將HTML代碼一同輸出。這時我們就可以使用v-html指令
注意：
（1）該指令後面往往跟上一個string（字符串)類型
（2）會將string中的html解析出來並進行渲染
<body>
<div id="app">
<h2>{{link}}</h2>
<h2 v-html="link"></h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
link:"<a href='www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
v-text
v-text和小鬍子語法比較相似，作用都是將數據顯示在界面上
v-text一般情況下接受一個string類型
注意： 會替換掉原有的內容
<body>
<div id="app" v-once>
<h2>{{message}}</h2>
<h2 v-text='message'></h2>
<h2 v-text='message'>你好</h2> //不會有你好
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:"hello vue"
}
})
</script>
</body>
v-pre
v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示原本的小鬍子語法
<body>
<div id="app" v-once>
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:"hello vue"
}
})
</script>
</body>
v-cloak
v-cloak防止表達式閃爍。給模板內的元素添加v-cloak屬性後，在vue解析之前，div中有一個屬性v-cloak，在vue解析之後，div中沒有一個屬性v-cloak。所以我們給這個屬性設置css樣式爲隱藏
<style>a
[v-cloak]{
display:none
}
</style>
<body>
<div id="app" v-once>
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:"hello vue"
}
})
</script>
</body>