day02
1、列表的过滤和排序 设计数据
逻辑并不难，关键就看能不能想到用计算属性
一个数据根据另外的数据变化而产生，八九不离十要使用计算属
性
2、vue如何去监视数据变化而更新页面（点击按钮修改第一项）
1、修改数组当中对象的属性，发现页面可以改变
2、调用数组的方法直接修改数组当中的整个对象，发现页面也可以改变
3、通过数组的下标直接修改数组当中的整个对象，发现页面改变不了
原因：
修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），data当中所有的对象
通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能
通过下标直接修改数组整个对象，不可以展示到页面，但是数据确实改了，因为数组的数据整体并没有添加get和set方法
对象数据和数组数据响应式的区别
3、强制绑定样式class和style
class动态绑定：
1、类名不确定 字符串形式
2、类名确定，但是不知道哪个生效 对象形式
3、类名有几个都生效 数组形式
style动态绑定
1、必须把原来的东西写在对象当中，样式名不变，样式值是动态的
2、样式名如果不合法，要变为小驼峰写法
4、条件渲染
v-if v-else 隐藏的时候直接删除元素节点 文档流当中不存在（内存无）
v-show 隐藏的时候通过css display: none去隐藏 文档流当中还存在（内存有）
哪个好？ 要看怎么用：假设我们需要频繁的切换，那么v-show效率比较高但是占内存
假设我们切换不频繁，那么v-if v-else就比较好，不占内存
5、事件绑定方法
v-on
@
参数：
1、不传参不需要加（），默认传递事件对象参数$event
2、传递参数需要加（），但是默认的事件对象参数会被传递的参数覆盖
3、如果既需要传递参数也需要使用事件对象，那么需要传递两个参数：1、自己的参数 2、$event
事件对象：
阻止事件冒泡 事件修饰符.stop
取消默认行为 事件修饰符.prevent
6、自动收集表单数据v-model的应用
输入框数据 输入的数据会自动赋值给data的数据
单选框数据 选中的value值会自动付给data的数据
多选框数据 选中的value值会自动添加到data数组当中
下拉菜单数据 选中的id值会自动赋值给data的数据
文本域数据 写上的文本会自动赋值给data的数据
7、生命周期钩子（回调函数）
给我们机会可以干预vue的工作流程
生命周期的执行顺序是固定的
创建前 初始化数据前 数据打印看不到
创建后 初始化数据后 数据打印可以看到
挂载前 初始页面不显示 初始页面的元素看不到
挂载后 初始页面显示 初始页面元素可以看到
更新前 页面更新前 实例数据是对的页面渲染的数据是错的
更新后 页面更新后 实例数据是对的页面渲染的数据是对的
销毁前 实例销毁前 在销毁前内部清除定时器
销毁后 实例销毁后 一般不用
使用mounted和beforeDestory比较频繁，mounted内部我们经常去做异步操作，添加事件 定时器 ajax
当调用了vm.$destroy(), beforeDestory和destoryed才会执行，beforeDestory做收尾工作：清除定时器等
8、过渡和动画的实现
参考官网
类名会自动添加给需要的元素，也就是transition标签内部的元素
9、自定义过滤器（参考官网）
展示数据的时候，对数据进行处理（格式化之后再显示，不会影响原数据）
使用moment插件
定义全局过滤器
Vue.filter('过滤器名字'，回调函数)；
定义局部过滤器
在vm当中fliters对象当中配置
10、vue的内置指令
v-text
v-html
v-on //绑定事件 简写@
v-bind //单向数据绑定 ：
v-for //列表渲染
v-if //条件渲染
v-else
v-show //条件渲染
ref //为特定的元素添加引用标识，实例的$refs内部可以获取到
11、自定义指令(和定义过滤器很像，参考官网)
定义全局指令
Vue.directive('过滤器名字'，回调函数)；
定义局部指令
在vm当中directives对象当中配置
注意：指令的名称必须是全小写，不能大写
12、自定义插件（参考官网）
插件的作用：
定义插件对象，为Vue和Vue的实例添加一些额外功能
插件对象必须声明使用 Vue.use（）
