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 指令的参数，该指令将 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>
文章知识点与官方知识档案匹配，可进一步学习相关知识
