看起来比较蛋疼 ，笑喷。。

数据在哪里声明就在那里进行操作

父组件可以调用任何子组件中声明过的事件

小伙伴们，大家好，针对老师的视频教程，我整理了一份完整的源码，源码还有详细的注释和笔记,供大家学习时参考。

GitHub下载地址：https://github.com/Jasonccj/vue-webpack-todo

自己跟2-1视频的第三遍，终于经过自己的努力和网上找资料，看学友们的问答终于整明白了。

ps：我本地是提前安装好了node.js、npm、webpack的3.*.*版本;

今天边尝试边做，终于弄出来了，可以跟下一个视频了；希望能帮到小伙伴们。

如果还想问的详细点可以私聊我。

特此把自己的代码贡献给大家看看。

命名含义不要觉得长

indIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

• 如果没有符合条件的元素返回 -1

学了一招 --- v-for 的时候 加上 :key

splice 数组方法，向数组添加或者删除item，返回修改后的数组
splice(index,howmany,item1,.....,itemX)
index:添加或者删除的索引位置
howmany:要删除的项目数量，如果为0，则不删除
item1....：添加的item

filter() 数组方法，创建一个新数组，筛选掉不满足条件的item
filter(function(currentValue,index,arr), thisValue)

unshift() 数组方法 向数组开头添加一个或多个item
unshift(itme1,item2...,itemn)  最少添加一个

trim() 字符串方法，去除字符串开头和结尾的空格

自组件通过this.$emit('父组件方法如：del'， 参数)通信父组件，父组件@del="方法"

props:{
    todos:{
        type: Array,
        required: true,
    }
},
computed:{
    unFinishedTodoLength(){
        return this.todos.filter(todo => !todo.completed).length
    }
}

1、computed 每次数据变化时，自动计算；

2、方法命名越详细越好；

this.todos.splice(this.todos.findIndex( todo => todo.id === id),1)

常见的函数式写法

todos.findIndex( todo => todo.id === id ）  得到那个ID

splice 1

任务的删除，有更简单的逻辑实现：

1.    ./todo/item.vue  中,不需要携带this.todo.id 

            deleteTodo() {

                this.$emit('del')

                }

    2.   ./todo.vue文件中修改为：

        <Item             

            v-for="(todo,index) in filteredTodos"

            :key="todo.id"

            :todo="todo"

            @del="deleteTodo(index)"

            />

         ......

        deleteTodo(index){

            this.todos.splice(index,1)

            }

修改后的逻辑更简洁清晰，不用去item.vue中绕一圈。

checkbox 选中之后，v-model绑定的值如果是布尔类型，该值会变成true ，再点击会变成false。

一、vue或react开发的时候，尽量将数据都集中在顶层的一个地方。

二、vue中$emit触发事件，父组件通过@监听事件，实现父子组件通信。

子组件用this.$emit('de', this.deleted)，父组件用@del=""监听，可以实现父子组件事件的解耦，父组件想监听就监听，不想监听就不监听。

三、chrome插件：vue.js devtools的安装，地址：https://segmentfault.com/a/1190000009682735。

四、this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1);

传进去的是todo，如果todo的id等于id，就删掉一个节点。

五、数组的filter方法

var ages = [32, 33, 16, 40];

function myFunction() {

    document.getElementById("demo").innerHTML = 

ages.filter( item => item >=18).length;

}

得到[32,33,40]。

六、如果用splice一条一条删，删了一条之后，index会改变，后续无法删，所以用filter。

数据在哪里声明，就在哪里操作。

七、findIndex()。

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

• 如果没有符合条件的元素返回 -1

（1） findIndex() 对于空数组，函数是不会执行的。

（2）findIndex() 并没有改变数组的原始值。

vue中$emit触发事件，父组件通过@监听事件，实现父子组件通信

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

• 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

this.todos.filter(todo => !todo.finished)

//过滤未完成的事项

this.todos.findIndex(todo => todo.id === id)