一、模板语法
Vue 中有两种模板语法，分别为插值语法和指令语法。
1. 插值语法
- 功能：插值语法通常用于解析
标签体内容。 - 写法：{{ xxx }} ，xxx 是表达式，可以直接读取 data 中的全部属性。
2.指令语法
- 功能：指令语法通常用于解析标签，包括
标签属性、标签体内容、绑定事件等。 - 写法：
v-bind:href="xxx"或v-bind用:代替，简写成:href="xxx"。 - 备注：Vue 中有很多指令，都是以
v-xxx形式出现，有些指令可以简写有些不可以，譬如v-if就不行。
二、数据绑定
1. 单向数据绑定
单向数据绑定：<input v-bind:value="name" />
v-bind 可以实现数据变化时页面元素跟着发生变化，即data流向页面，反过来则不行。
2. 双向数据绑定
双向数据绑定：<input v-model:value="name" />
v-bind 可以实现data流向页面，也可以从页面流向data。
双向绑定一般作用在表单元素上，譬如input、select，checkbox等； 因为v-model默认作用于value属性，所以value可以省略，:也可以省略
3. 数据绑定的简写方式
<!-- 普通写法 -->
单向数据绑定：<input v-bind:value="name" /><br>
双向数据绑定：<input v-model:value="name" /><br>
<!-- 简写写法 -->
单向数据绑定：<input :value="name" /><br>
双向数据绑定：<input v-model="name" /><br>
<!-- 错误写法，因为v-model作用在value属性上，所以这里会报错 -->
<div v-model:x="name"></div>
