一、初识Vue
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器（带有id = root的div）里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为“vue 模板”
4.Vue实例和容器是一一对应关系；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{XXX}}中XXX要写JS表达式，且XXX可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：JS表达式 和 JS代码（语句）
1.表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方。
①. a(为赋值的变量)
②. a + b
③. fn(1) （赋予实参的方法）
④. x === y ? 'a' : 'b'
2.JS代码（语句）
①. if(){}
②. for(){}
二、Vue模板语法
1.插值语法：
功能：用于解析标签体内容。
格式：{{XXX}}，XXX是JS表达式，且可以直接读取到data中的所有属性。
2.指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
例子：v-bind：href="xxx" 可以简写成 :href="xxx", xxx同样要写JS表达式，且可以直接读取到data中的所有属性（Vue中有很多是v-xxx指令）
三、Vue绑定事件
两种绑定方式
1.单向绑定（v-bind）：数据只能从data流向页面。
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
注意：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model：value 可以简写为v-model，因为v-model默认收集的就是value值。
四、data与el的两种写法
1.el有2种写法
（1）. 创建new Vue时候配置el属性
（2）. 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
- data有2种写法
（1）.对象式
（2）.函数式
如何选择：目前哪种写法都可以，以后想学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则： 由Vue管理的哈桉树，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
五、MVVM模型
1.M:模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）：Vue实例
data中所有的属性，最后都出现在vm身上。 vm身上所有的属性以及Vue原型上的所有属性，在Vue模板中都可以直接使用。
六、数据代理
1.Vue中的数据代理： 通过vm对象来代理data对象中的属性操作（读或写）
2.Vue中数据代理的好处： 更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中的所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读或写）data中对应的属性。
七、事件基本使用
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上（vuemodel）；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了（this会指向window）；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
八、Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
九、Vue按键别名
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
十、计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
十一、监视属性
1.监视属性watch：
(1).当被监视的属性变化时, 回调函数自动调用, 进行相关操作
(2).监视的属性必须存在，才能进行监视！！
(3).监视的两种写法：
①.new Vue时传入watch配置
②.通过vm.$watch监视
2.深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
3.computed和watch之间的区别：
(1).computed能完成的功能，watch都可以完成。
(2).watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
(1).所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
(2).所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。
