vue从入门到精通day02

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