一、Vue简介
1.定义
2.开发者
3.特点
组件化模式
声明式编码
使用虚拟DOM
数据改变后，页面中的DOM全部替换。原生js可以实现复用，要自己写逻辑，但数据量大时效率低。
只渲染了最小范围的更新过的虚拟DOM
二、初识Vue
1.Hello 案例
（1）引入vue
引入vue后，多了个全局的vue构造函数
（2）准备一个容器
插值语法：{{ }}
（3）创建vue实例
new Vue() 的时候只传一个参数，这个参数是一个对象(配置对象)
（4）vue实例的参数
el：用于指定当前vue实例服务于哪个容器，值通常为选择器字符串
data：{
1.用于存储数据，数据供el中指定的容器去使用
2.值暂时写成一个对象
}
data多级结构
总结：
js表达式
2.el和data的两种写法
（1）el的两种写法
v是Vue的一个实例对象，$mount是vue实例对象的proto里面的属性
与计时器连用，灵活性更高
（2）data的两种写法
第二种写法data是用函数返回一个对象，这个函数是由Vue调用的
总结：
三、Vue模板语法
1.插值语法
{{ }}用于解析标签体内容，也可以放函数 ，放函数要加( )
2.指令语法
v-bind：vue会把“ ”中的内容当成js表达式去解析，不加v-bind则是把“ ”中内容当字符串
注意：v-bind：可以简写成
：
总结：
四、数据绑定
1.单向绑定
2.双向绑定
总结：
注意：
五、理解MVVM模型
所以创建vue实例对象时，名字用vm
总结：
vm上的属性
Vue原型上的属性
都可以在vue模板中直接使用而不需要使用vm.$options
六、数据代理
1.Object.defineProperty
用于操作对象的属性
1.1 Object.defineProperty() 的基本属性
- Object.defineProperty() 添加的属性，枚举对象时不参与遍历，除非添加enumerable:true
- Object.defineProperty() 添加的属性，修改时不生效，除非添加writable:true
- Object.defineProperty() 添加的属性，删除时不生效，除非添加configurable:true
1.2 getter和setter
简写形式
2. 数据代理
2.1 定义
数据代理：通过一个对象代理对另一个对象中属性的操作（读、写）
用obj2来代理obj，通过obj2来操作obj里面的属性
2.2vue中的数据代理
vm中的address和name属性，修改时会调用setter方法，点击获取时会调用getter方法
（1）收集数据
vue为vm准备的东西，已经足够我们在代码中访问name和address属性
（2）数据代理
把data中的属性数据放到vm中一份，为了编码更方便
总结
七、事件处理
1.事件的基本使用
注意：
1.被vue管理的函数都写成普通函数的形式，不要用箭头函数形式，否则this不指向vue实例而是指向window对象
2.v-on:click的简写形式 @click
3.回调函数：不传参就不加括号，传参就加括号
传参的时候想获取事件对象，需用$event
4.methods里的方法没有做数据代理，因为函数只需调用，不需要修改而data中的变量需要改变。
总结：
2.事件修饰符
2.1原生
2.2vue中事件修饰符
注意：阻止事件冒泡加在内层子元素上
self修饰符也可以阻止事件冒泡
3.键盘事件
3.1键盘事件
keyup、keydown
用原生的事件对象的keyCode来判断按下了哪个按键
vue中不用自行判读键盘按下的是哪个键，vue给常用按键起了别名
3.2vue中按键别名
不推荐：
注意：tab键：可以切换焦点，tab键最好和keydown连用，因为按下tab键还没等到弹起来的时候焦点已经切走了
4.事件总结
4.1事件修饰符可以连用
4.2 指定和系统修饰符配合使用的按键
八、计算属性
vue官方建议插值语法的内容应尽量简单，所以我们在methods中定义方法进行操作
只要data中数据发生改变，vue就重新解析模板，插值语法中的方法就重新调用一遍
1.概念
data{ }对象 ：存放属性，
computed{ }对象 ：存放计算属性
计算属性的内容可能很繁琐，所以定义成对象形式
2.使用
计算属性有缓存，不是每次获取都要重新计算，当它依赖的属性发生变化时，才会重新计算。
data和methods中的属性和方法，写啥就是啥，都会按本身性质出现在vm中。而对于计算属性，vm会把fullName中的get( )调用，把返回值存在vm中，并取名为fullName。
因此，计算属性直接读取使用！！不要写成fullName.get( )，不是调用函数！！
3.计算属性总结
4.计算属性简写
确定只读不改的时候，计算属性可以去掉set方法
fullName不再写成配置对象形式，而是写成函数，当成get( )使用
5.案例：计算价格
九、监视属性
点击实现天气切换
1.使用
监视属性写成对象形式，因为可能有很多配置项
注意：immediate：true，表示初始化时就调用handler函数
监视属性可以监视data中的属性，也可以监视计算属性
2.总结
3.深度监视
4.监视的简写
当配置项中不需要其他属性，只需要方法时，可以简写
5.案例：计算文本框字数
6.监视属性和计算属性的区别
监视属性（侦听属性）和计算属性往往可以实现同一个功能，对比选取最优方案：
1.两种方法都能实现的时候，选computed计算属性
2.涉及异步计算，我们选用watch监视属性
- 计算属性姓名案例
- 侦听属性姓名案例
注意：
1.计算属性不能开启异步任务 (比如用定时器)；侦听属性可以配合定时器使用
2.计算属性不需要写在data中，有return返回值；侦听属性写在data中，没有返回值
十、绑定样式
1.class
- 字符串写法：适用于样式的个数只有一个，类名不确定
- 数组写法：适用于要绑定的样式个数不确定，类名也不确定
通过对arr数组的增删，实现动态绑定类名
- 对象写法：适用于要绑定的样式个数确定，类名也确定
2.style
行内样式
3.总结
十一、条件渲染
1.v-show
隐藏时节点html结构依旧存在
2.v-if
隐藏时节点html结构也不在了
v-else 后面一般不加判断条件
注意：
3.区别
v-show 适用于变化的很频繁的情况，因为DOM节点一直存在
v-if 适用于变化频率不高，因为要一直添加删除DOM节点，耗时
4.总结
十二、列表渲染
1.遍历基本列表
（1）遍历数组
in也可以用of替代
（2）遍历对象
（3）遍历字符串
（4）遍历指定次数
总结：
2.key作用与原理(面试)
2.1index作为key时
DOM少有复用，效率很低
2.2id作为key时
无论“老刘加在数组前面还是后面”，都不影响DOM复用率
2.3总结
有唯一标识，尽量使用唯一标识作为key，不指定key的话vue自己不知道
3.列表过滤(模糊搜索)
3.1用watch实现
（1）搜集用户输入
（2）监听输入改变
（3）数组过滤
filter不会改变原数组，会返回一个新数组
3.2用computed实现
简单点，优先选择
4.列表排序
sort改变原数组，a-b为升序，b-a为降序
5.vue监测数据改变的原理
？？？？？六集没看，后续再补
十三、收集表单数据
十四、过滤器
十五、内置指令
1.v-text
插值语法更推荐，可以随意拼接
总结:
2.v-html
cookie的作用
盗取cookie
总结:
3.v-cloak
v-cloak配合css解决页面闪烁（防止未经解析的模板出现在页面中）
结构跑到页面上先隐藏，等vue介入的时候，v-cloak消失，节点出现并渲染
总结：
4.v-once
总结：
5.v-pre
总结：
十六、自定义指令
1.函数式
通过操作原生DOM来实现功能需求
函数被调用的情况
1.指令与元素成功绑定时（一上来）
2.指令所在模板被重新解析时
2.对象式
bind、inserted、update类似于生命周期钩子函数
3.总结
（1）命名方式
（2）this指向
（3）全局指令
把对象式自定义指令变为全局指令
把函数式自定义指令变为全局指令
总结：
十七、生命周期
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。
在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
1.挂载流程
2.更新流程
3.销毁流程
vue实例被销毁以后，该事件依然有效
4.总结
关闭定时器，beforeDestroy的应用
