### 什么是 vue
1. 构建用户界面
+ 用 vue 往 html 页面中填充数据，非常的方便
2. 框架
+ 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
+ 要学习 vue，就是在学习 vue 框架中规定的用法！
+ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
+ 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
### vue 的两个特性
1. 数据驱动视图：
+ 数据的变化**会驱动视图**自动更新
+ 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
2. 双向数据绑定：
> 在网页中，form 表单负责**采集数据**，Ajax 负责**提交数据**。
+ js 数据的变化，会被自动渲染到页面上
+ 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
> 注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
### vue 指令
#### 1. 内容渲染指令
1. `v-text` 指令的缺点：会覆盖元素内部原有的内容！
2. `{
{ }}` 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3. `v-html` 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
#### 2. 属性绑定指令
> 注意：插值表达式只能用在元素的**内容节点**中，不能用在元素的**属性节点**中！
+ 在 vue 中，可以使用 `v-bind:` 指令，为元素的属性动态绑定值；
+ 简写是英文的 `:`
+ 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
```xml
<div :title="'box' + index">这是一个 div</div>
```
#### 3. 事件绑定
1. `v-on:` 简写是 `@`
2. 语法格式为：
```xml
<button @click="add"></button>
methods: {
add() {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
}
}
```
3. `$event` 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
```xml
<button @click="add(3, $event)"></button>
methods: {
add(n, e) {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
}
}
```
4. 事件修饰符：
+ `.prevent`
```xml
<a @click.prevent="xxx">链接</a>
```
+ `.stop`
```xml
<button @click.stop="xxx">按钮</button>
```