day05
1、todoList组件化开发（案例）
静态页面 1、拆分页面 定义组件 2、将组件组装到App当中 3、渲染组件实现静态页面 动态页面 1、初始化动态显示页面 设计数据 todos = [ {id:1,content:'吃饭',isOver:false},{id:2,content:'睡觉',isOver:false}] 数据展示 初始化todo内容展示和是否选中的展示 注意： 是否选中的打勾状态数据是根据todo的isOver计算而来的，需要computed去计算
2、交互（与用户的交互）
2-1：完成鼠标移入移出删除按钮的出现和消失及背景色的改变 Item
页面的变化其实对应的是数据的变化
2-2: 完成添加todo逻辑
2-3: 点击每一项修改打勾（是否完成）操作 Item
2-4：完成点击删除，删除某一项的操作 Item
2-5：完成已完成和全部的数量展示 Footer 根据todos相关数据计算而来
2-6：完成获取全选和全不选功能 全选和全不选功能checked的结果根据已完成和全部的数量计算得到
2-7：点击设置全选和全不选，完成功能
2-8：删除已完成功能
2-9：刷新还是原来的效果，不会回到初始的情况（数据存储分析）
保存什么数据 todos
数据保存在哪 localStorage
什么时候保存 数据只要发生改变就该存储 ===== 》 深度监视
什么时候读取 初始化显示就该读取，在date中读取
localStorage的简介（永久存储，关闭和刷新浏览器，数据不会丢失）
localStorage是h5新增的一种本地存储数据方式，本质是一个对象
setItem(key,value)
getItem(key) 如果没有返回null
removeItem(key)
clear()
2-10：一般监视和深度监视
一般监视：
数组本身发生改变
数组内部元素整体改变
深度监视：
数组本身发生改变
数组内部元素整体改变
数组内部元素内部数据改变
2-11：深度监视数据，保存
数据需要变为json然后取存储，否则数据下次取到的就看不懂了内部会调用对象的toString，数据变了
2-12：在data数据中，直接从localStorage中获取数据
reduce() reduce()会比上面的几种方法复杂一些，reduce()接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。reduce()的语法如下所示。 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
在reduce()中，第二个参数是可选的。如下代码所示。 var arr=[1,2,3]; var result= arr.reduce((a, b)=>a + b);//10 console.log(result);//6 运行代码后，控制台输出如图10-26所示。
图10-26 控制台输出
reduce()的callback可以接收四个参数。第一个参数为上一次调用回调返回的值或为初始值；第二个参数为正在执行的元素；第三个参数为数组中正在执行元素的索引；第四个参数为数组本身。如下所示。 var result1 = arr.reduce(function (total, currentValue, currentIndex, array) { console.log(total, currentValue, currentIndex, array); return total + currentValue; }); console.log(result1); 运行代码后，控制台输出如图10-27所示。
图10-27 控制台输出
从输出结果可以看到callback调用了2次，每次调用的参数和返回值，如下表6-1所示。 表 6-1 reduce调用参数 total currentValue currentIndex array return value 第一次调用 1 2 1 [1,2,3] 3 第二次调用 3 3 2 [1,2,3] 6
表6-1为callback接收四个参数但没有传入第二个参数的情况。那传入第二个参数又是什么样的呢？如下代码所示。 var arr = [1, 2, 3]; var result2 = arr.reduce(function (total, currentValue, currentIndex, array) { console.log(total, currentValue, currentIndex, array); return total + currentValue; }, 100); console.log(result2); 运行代码后，控制台输出如图10-28所示。
图10-28 控制台输出
这次运行后，可以发现callback调用了3次，每次调用的参数和返回值，如下表6-2所示。 表 6-2 reduce调用参数 total currentValue currentIndex array return value 第一次调用 100 1 0 [1,2,3] 101 第二次调用 101 2 1 [1,2,3] 103 第三次调用 103 3 2 [1,2,3] 106
当提供了第二个参数（initialValue）时，我们发现reduce()会从索引为0的currentValue开始执行callback；当不提供第二个参数（initialValue）时，reduce()会从索引为1的currentValue开始执行callback。也就是说当调用reduce()时，提供第二个参数（initialValue）时，total取值为initialValue，currentValue取数组中第一个值；不提供第二个参数，total取数组中第一个值，currentValue取数组中第二个值。
2、 组件化编码的基本规范
子组件里面不要去更新父组件当中的数据
1、分析数据在哪个组件
2、数据在哪个组件，那么更新数据的行为（方法）就在哪个组件
3、父组件的数据传递给子组件，是用来让子组件读取显示使用的，而不是让子组件去修改的（可以但是不该）
4、子组件需要更新数据，那么需要调用父组件传递过来的更新数据方法
props三种写法： 通信的时候，只能是父子之间
第一种接收属性写法
props: ['index']
第二种接收属性写法
props:{
index:Number
}
第三种接收属性写法
props:{
index:{
type:Number,
default:0
}
}
自定义事件组件间通信深入理解： 和props父给子传递函数数据的时候类似
自定义事件：
自己定义的事件：事件类型（自己定义无数个）和回调函数（自己定义自己触发，默认传参是自己传就有，不传就是undefined）
系统定义的事件：事件类型（固定几个）和回调函数（自己定义系统触发 默认参数是事件对象）
适用：专门子向父通信
做法：在父组件当中可以看到子组件对象，给子组件对象绑定自定义事件$on 回调函数的定义在父组件中
在子组件当中，我们需要传递数据的地方，去触发自己身上的事件$emit，调用回调函数中传参给父
为什么父不能通过自定义事件给子传递数据
原因：因为父组件内部可以看到子组件对象，可以给子组件对象绑定事件，回调函数在父组件定义
而子组件内部看不到父组件对象，没法给父组件对象绑定事件，子组件没法定义回调函数，但是可以看到自己身上的事件，
可以触发
接受数据的组件必须能看到预绑定事件的组件对象，才能绑定
发送数据的组件必须能看到绑定了事件的组件对象，才能触发事件
$on
$emit
$off //解绑事件
$once //绑定只能触发一次的事件
vm和组件对象的关系
vm实例化对象的原型是组件对象原型的原型
$on $emit 等方法是在vm的隐式原型身上的（Vue的显式原型身上）
全局事件总线组件间通信 适用于任意组件间传递 必须理解必须搞定 创建一个中间人，让所有的组件都可以看到这个人，并且这个人可以使用emit （vm添加到Vue原型当中作为总线） 在想要接受数据的组件内 找中间人去绑定事件 在想要发送数据的组件内 触发中间人绑定的事件
