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>
