vue完成记事本小功能（没有css样式）

app.vue
<template>
  <div class="">
    <SchuRuKuang @Add="handleAdd"></SchuRuKuang>
    <LieBiaoZhanShi :list="list" @delOne="handledelOne"></LieBiaoZhanShi>
    <TongjiQingKong v-show="list.length>0" :length="list.length" @clear="handleclear"></TongjiQingKong>
  </div>
</template>

<script>
import SchuRuKuang from './components/SchuRuKuang.vue';
import LieBiaoZhanShi from './components/LieBiaoZhanShi.vue';
import TongjiQingKong from './components/TongjiQingKong.vue';
export default {
  components:{
    SchuRuKuang,LieBiaoZhanShi,TongjiQingKong
  },
  data(){
    return {
      list:[
        {id:1,TodoName:'抽芙蓉王'},
        {id:2,TodoName:'抽瑞克五'},
        {id:3,TodoName:'抽和天下'},
        {id:4,TodoName:'抽喜之郎'}
      ]
    }
  },
  methods:{
    handledelOne(id){
      console.log(id);
      this.list=this.list.filter(item => item.id!=id)
    },
    handleAdd(newValue){
      this.list.push({id: +new Date(),TodoName:newValue})
    },
    handleclear(){
      this.list=[]
    }
  }
}
</script>

<style>

</style>

<template>
  <!-- 统计和清空 -->
  <footer class="footer">
    <!-- 统计 -->
    <span class="todo-count"
      >合 计:<strong>{{ length }} </strong></span
    >
    <!-- 清空 -->
    <button class="clear-completed" @click="clear">清空任务</button>
  </footer>
</template>

<script>
export default {
  props:['length'],
  methods:{
    clear(){
      this.$emit('clear')
    }
  }
}
</script>

<style>

</style>

<template>
   <!-- 输入框 -->
   <header class="header">
    <h1>我的记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="TodoName"/>
    <button class="add" @click="Add()">添加任务</button>
  </header>
</template>

<script>
export default {
    data(){
      return {
        TodoName:''
      }},
    methods:{
      Add(){
      if(this.TodoName.trim()===''){
        alert('亲输入内容')
        return;
      }
      this.$emit('Add',this.TodoName)
      this.TodoName=''
    }
    }
  }
</script>

<style>

</style>

<template>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list" v-for="(item,index) in list" :key="item.id">
      <li class="todo">
        <div class="view">
          <span class="index">{{index+1}}</span>&nbsp;&nbsp;
          <span>{{item.TodoName}}</span>&nbsp;&nbsp;
          <button class="destroy" @click="del(item.id)">清除</button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
    props:{
        list:Array
    },
    methods:{
        del(id){
        this.$emit('delOne',id)
    }
    }
}
</script>

<style>

</style>