学习尚硅谷Vue的TodoList案例下半部分总结

今天学习尚硅谷Vue的TodoList案例四到八节的内容，主要实现的功能有勾选、删除、底部统计、底部交互这几部分。先说勾选，想要获取到用户是否勾选，就要给checkbox多选框注册鼠标点击事件，这里的思路是用户虽然是获取到了是否勾选但还要知道勾选的是哪个事项，这时就要拿到事项对应的id，然后通过数组forEach方法遍历已有的事项做一个if判断里面的id和用户点击的事项的id直到一致之后就将事项里面的勾选值更改，即可实现页面和数据都是一致的了，以上的操作其实是在item组件中使用了App组件的方法，这里需要注意的是以现在的知识量想要子组件用到父组件身上的方法，就需要通过将父组件的方法写成函数的形式引入到子组件内让其接收，子组件调用的时候还可以传参会给父组件身上的函数做处理，但后面会学到更好方法来解决这个问题，在实现这个功能的同时也引出了v-mode双向数据绑定改变props数据的情况，我们之前学过props引入进来的数据只能读取不能修改，但这里却可以将它修改，通过测试发现Vue只能监测到我们修改整个对象（也就是内存的地址），但监测不到我们修改对象里面的值，虽然是可以这么改掉props的数据但是不提倡这么做。

下一个要实现的是删除功能，这个和勾选功能很相似，同样是给删除按钮绑定点击事件，触发事件先去获取事项的id，然后在App文件中通过数组的filter方法将删除的id事项过滤掉，使用filter这个方法Vue是可以检测到你改变了数组的，这时它就会帮我们重新渲染一般就可以达到数据和页面都删除的功能了。

最后要实现的就是底部的部分了，统计这里就比较直接，全部事项的总数就是数组的长度，但已完成的事项数量可以用不同的方法实现，首先是用数组的forEach方法实现，在方法外面先定义一个i变量作为已完成事项的计数，将事项的done勾选值作为判断条件，勾选则i++，最后得到已完成的事项总数，另一种是数组的reduce方法，这个方法需要传入两个参数，第一个参数是一个函数，第二个参数是初始值，这里的初始值是作为计数的起点，重点是第一个参数的函数，这个函数同样可以接收两个参数，第一个参数就是刚才的初始值，而第二个参数是数组的元素，有了元素我们就可以对它进行判断，判断条件成立的话就在return初始值加一，以此类推最后就得出了满足条件的事项。统计作为之后剩下最后一个就是清楚已完成的任务功能，因为这个功能比较特殊，事项如果全选的话那边底部的选项框也要自动勾选上，还有一种就是点击底部选项框时上面的事项全部都要勾选或取消，考虑到这是双向的情况下我们最好使用v-model双向数据绑定的形式来实现，这样两边都可以读取或修改v-model的数据了，有了这个思路之后实现该功能就变得简单明了了。