Vue3.0实现todolist-实现todolist每个组件需

参考文档

参考文档：https://blog.csdn.net/ll666888999/article/details/123789098
参考视频：https://www.imooc.com/learn/1300
官方文档查看文档：https://v3.cn.vuejs.org/

NavHrader中绑定键盘事件

<div>
    <input placeholder="请输入任务名称" v-model="value"  @keydown.enter="enter"/>
  </div>

在setup()里面定义方法

setup() {
    let value = ref("");

    let enter = () =>{
      console.log(value.value)
    }

    return {
      value,
      enter
    };
  },

运行结果

NavHeader.vue

<template>
  <div>
    <input placeholder="请输入任务名称" v-model="value"  @keydown.enter="enter"/>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "navHeader",
  setup() {
    let value = ref("");
    let enter = () =>{
      console.log(value.value)
    }
    return {
      value,
      enter
    };
  },
});
</script>
<style scoped>
</style>

NavMain中div取类名为item，button取类名为del，绑定点击事件

NavMain.vue

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div class="item">
        <input type="checkbox" v-model="item.complete" />
        {{ item.title }}
        <button class="del"  @click="del(item,index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "navMain",
  setup() {
    let list = ref([
      {
        title: "吃饭",
        complete: false,
      },
      {
        title: "睡觉",
        complete: false,
      },
      {
        title: "打豆豆",
        complete: false,
      },
    ]);

    //删除任务
    let del=(item,index) =>{
      console.log(item)
      console.log(index)

    }

    return {
      list,
      del
    };
  },
});
</script>

<style scoped  lang='scss'>
// .item{
//   height: 35px;
//   line-height: 35px;
//   position: relative;
//   width: 160px;
//   cursor: pointer;

//   button {
//     position: absolute;
//     right:20px;
//     top:6px;
//     display:none;
//     z-index:99;
//   }

// }

// &:hover{
//   background: #ddd;
//   button{
//     display: block;
//   }
// }
</style>

运行结果
依次删除

NavFooter 样式名起类名container，里面取类名btn
button绑定点击事件clear

<template>
  <div class="container">
    <div>已完成{{ isComplete }}/全部{{ all }}</div>

    <div v-if="isComplete > 0"  class="btn">
      <button  @click="clear">清除已完成</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "navFooter",
  setup() {
    let isComplete = ref(1);
    let all = ref(3);

    //清除已完成

    let clear =() =>{
      console.log('clear')
    }
    return {
      isComplete,
      all,

      clear
    };
  },
});
</script>

<style scoped>
</style>