Vue 使用基于 HTML 的模板语法，允许开发者将 DOM 绑定到底层 Vue 实例的数据
而在底层实现上，Vue 将模板编译成虚拟 DOM 渲染函数
结合响应系统，Vue 可以计算出最少需要重新渲染多少组件，把 DOM 操作减到最少
1、插值
（1）普通文本
- 使用 v-text 指令，更新元素的 textContent
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
- 使用 Mustache 语法（双大括号语法），更新部分的 textContent
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>Hello {{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "Vue"
}
})
</script>
</body>
</html>
（2）原始 HTML
由于双大括号会将数据解释为普通文本，因此为了输出 HTML，可以使用 v-html 指令
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "<h1>Hello Vue</h1>"
}
})
</script>
</body>
</html>
（3）HTML 属性
由于双大括号不能作用在 HMTL 属性上，因此可以使用 v-bind 指令
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-bind:disabled="isButtonDisabled">Hello Vue</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isButtonDisabled: true
}
})
</script>
</body>
</html>
（4）JavaScript 表达式
在双大括号中可以使用完全的 JavaScript 表达式，但是 只能包含单个表达式
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'HELLO'
}
})
</script>
</body>
</html>
2、指令
指令是带有 v- 前缀的特殊特性，当表达式的值发生改变时，会将其产生的影响作用于 DOM
上面所使用的 v-text，v-html 和 v-bind 都是指令，让我们来重新回顾一下：
<!-- 使用 v-text -->
<p v-text="message"></p>
<!-- 使用 v-html -->
<p v-html="message"></p>
<!-- 使用 v-bind -->
<button v-bind:disabled="isButtonDisabled">Button</button>
（1）参数
一个指令可以没有参数（例如上面的 v-html），也可以带有参数（例如上面的 v-bind:disabled）
disabled 是 v-bind 指令的参数，v-bind 指令将 disabled 属性的值和 isButtonDisabled 表达式的值联系起来
（2）动态参数
此外，可以用方括号括起来的 JavaScript 表达式作为一个指令的动态参数，例如：
<a v-on:[eventName]="doSomething"> ... </a>
在这里，eventName 会作为一个 JavaScript 表达式动态求值，这样我们就可以为一个动态的事件名绑定处理函数
例如，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus
使用动态参数有下面几个需要注意的地方：
- 动态参数预期得到一个字符串，异常情况下得到一个 null 用于显示移除绑定，其它非字符串类型会触发一个警告
- 在动态参数表达式中，空格和引号放在 HTML 属性中是无效的
- 在动态参数表达式中，大写字母放在 HTML 属性中可能会被浏览器自动转换成小写
（3）缩写
Vue 为 v-bind 和 v-on 两个常用的属性提供了缩写
- v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
- v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】