头部组件

<template>
    <div class="todo-header">
     <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/>
    </div>
</template>

<script>

import {nanoid} from 'nanoid'

export default {
      name:"MyHeader",
      props:['re'],
      methods: {
        add(e){
          if(!e.target.value.trim()) return alert("输入不能为空")
          const arr ={id:nanoid(),name:e.target.value,done:false}
          console.log(arr)
          this.re(arr) 
          e.target.value=''
        }
      },
      
};
</script>

<style  scoped>
    /*header*/
    .todo-header input {
      width: 560px;
      height: 28px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 7px;
    }

    .todo-header input:focus {
      outline: none;
      border-color: rgba(82, 168, 236, 0.8);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>

列表组件

<template>
  <ul class="todo-main">
    <MyItem 
    v-for="arr in arrs" 
    :key="arr.id" 
    :arr="arr" 
    :changeDone="changeDone"     
    :del="del"
  /> 

  </ul>
</template>

<script>
import MyItem from "./MyItem.vue";

export default {
  name: "MyList",
  components: { MyItem },
  props:['arrs','changeDone','del'],
};
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 5px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

事件组件

<template>
  <li>
    <label>
      <input type="checkbox" :checked="arr.done" @change="a(arr.id)"/>
      <!-- <input type="checkbox" v-model="arr.done"/> -->
      <span>{{arr.name}}</span>
    </label>
    <button class="btn btn-danger" @click="d(arr.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  props:['arr','changeDone','del'],
  methods: {
    a(id){
      this.changeDone(id)
    },
    d(id){
       if(confirm("确认删除吗")){
        console.log(id)
        this.del(id)
       }
    }
  },
};
</script>

<style scoped>
    /*item*/
    li {
      list-style: none;
      height: 36px;
      line-height: 36px;
      padding: 0 5px;
      border-bottom: 6px solid rgb(250, 238, 238);
    }

    li label {
      float: left;
      cursor: pointer;
    }

    li label li input {
      vertical-align: middle;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }

    li button {
      float: right;
      display: none;
      margin-top: 3px;
    }

    li:before {
      content: initial;
    }

    li:last-child {
      border-bottom: none;
    }
    li:hover{
      background-color: aqua;
    }
    li:hover button{
      display: block;
    }
</style>

底部组件

<template>
  <div class="todo-footer" v-show="toTal" >
    <label>
      <!-- <input type="checkbox" @click="upd" :checked="toTals===toTal"> -->
         <input type="checkbox" v-model="isAll">
    </label>
    <span> <span >已完成{{toTals}}</span> / 全部{{toTal}} </span>
    <button class="btn btn-danger" @click="clearDone">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props:['arrs','updDone','clearDone'],
  computed:{
     toTals(){
          // return this.arrs.reduce((pre,arr)=>{
          //   return  pre+ (arr.done?1:0)
          //  },0)
    return this.arrs.reduce((pre,arr)=>pre+ (arr.done?1:0),0) 
     },
     toTal(){
     return this.arrs.length
     },
     isAll:{
       get(){
          return this.toTal===this.toTals &&this.toTal>0
       },
       set(e){
          this.updDone(e) 
       } 
     }
  },
  // methods:{ 
  //       upd(e){
  //         // console.log(e)
  //        this.updDone(e.target.checked)    
  //       }
  // }
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

App组件

<template>
 <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :re="re"/>
        <MyList :arrs="todoArrs" :changeDone="changeDone" :del="del"/>
        <MyFooter :arrs="todoArrs" :updDone="updDone"  :clearDone="clearDone"/>
      </div>
    </div>
</div>
</template>

<script> 
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyList from './components/MyList' 



export default {
  name: 'App',
  components: { MyHeader,MyFooter,MyList  },
  data() {
      return { 
      todoArrs:[
                  {id:"01",name:"吃饭",done:true},
                  {id:"02",name:"睡觉",done:false},
                  {id:"03",name:"打豆豆",done:true},
                  {id:"04",name:"玩游戏",done:false},
      ]
      }
},
   methods: {
    // 添加头部传过来的数据
    re(x){
       this.todoArrs.unshift(x)
       console.log("收到数据"+x)
    },
    //改变是否完成
    changeDone(id){
        this.todoArrs.forEach(a=>{
          if(id===a.id){
            a.done = !a.done 
            console.log(a)
          }
          
        }) 
    },
    //删除
    del(id){
      this.todoArrs =  this.todoArrs.filter(fli=>  fli.id!==id)
    },
    //全选或全不选
    updDone(v){
      this.todoArrs.forEach((e)=>{
            e.done =v
      })
    },
    //删除已完成的任务
    clearDone(){
       this.todoArrs =  this.todoArrs.filter(fli=>fli.done!==true)
    }
   },
}
</script>

<style>
    body {
      background: #fff;
    }

    .btn {
      display: inline-block;
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }

    .btn-danger {
      color: #fff;
      background-color: #da4f49;
      border: 1px solid #bd362f;
    }

    .btn-danger:hover {
      color: #fff;
      background-color: #bd362f;
    }

    .btn:focus {
      outline: none;
    }

    .todo-container {
      width: 600px;
      margin: 0 auto;
    }
    .todo-container .todo-wrap {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

</style>