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（）