概念
1、创建 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
let app = new Vue({ });
在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：
- el
- data
- methods
等等 接下来我们一 一介绍。
2、模板或元素
每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染。 我们可以通过 el 属性来指定。 例如一段 html 模板：
1. <div id="app"> 2. 3. </div>
然后创建 Vue 实例，关联这个 div
1. let vm = new Vue({ 2. 3. el: "#app" 4. 5. })
这样，Vue 就可以基于 id 为`app`的 div 元素作为模板进行渲染了。在这个 div 范围以外的部 分是无法使用 vue 特性的。
3、数据
当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监 视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
<div id="app"> <input type="text" v-model="name" /> </div> JS: let vm = new Vue({ el: "#app", data: { name: "刘德华" } })
name 的变化会影响到`input`的值
input 中输入的值，也会导致 vm 中的 name 发生改变
4、方法
Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用。
<div id="app"> {{num}} <button v-on:click="add">加</button> </div> let vm = new Vue({ el: "#app", data: { num: 0 }, methods: { add: function () { // this 代表的当前 vue 实例 this.num++; } } })
安装 vue-devtools 方便调试
打开浏览器控制台，选择 vue
安装 vscode 的 vue 插件
安装这个插件就可以有语法提示
指令
什么是指令？
指令 (Directives) 是带有 `v-` 前缀的特殊特性。
指令特性的预期值是：单个 JavaScript 表达式。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。例如我们在入门案例中的 v-on，代表绑定事件
格式：{{表达式}}
说明：
该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数
