使用vue制作todolist

要求：
(1)能显示未完成的任务和已完成的任务。
(2)能添加新的任务。
(3)能修改任务的状态(未完成->已完成)
(4)能删除任务。
(5)能清空所有任务。
 

在这个案例中，我们会使用到css的一个动画库 Animate.css，使用方法如下：

安装：

 npm install animate.css --save

在main.js中全局引入：

import 'animate.css';

然后配合vue过度动画一起使用

案例开始:

首先看一下我完成的效果图：

 真对这个案例，首先我创建了三个组件，分别是 Form.vue 、Todo.vue 、Finish.vue

接下来上关键代码（省略了样式）：

 Form.vue：

<template>
  <div class="f_container">
    <div class="ipt_box">
      <input type="text" v-model="todos">
      <button @click="sub" class="btn">提交</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'MyForm',
  setup(props, { emit }) {
    let todos = ref('')

    function sub() {
      emit('addToDo', todos.value)
      // todos.value = ''
    }
    return {
      todos,
      sub
    }
  }
}
</script>

Todo.vue ：

<template>
  <div class="todo_container">
    <div class="title">待做</div>
    <!-- <h2>待做</h2> -->
    <transition-group name="todo" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
      <li v-for="(item,i) in todoList" :key="item" class="item">
        {{ item }}
        <button @click="finish(item,i)">完成</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'Todo',
  props: {
    todos: String
  },
  setup(props, { emit }) {
    let todoList = ref([])

    let finish = (item, i) => {
      // 点击完成
      emit('MyFinish', item)

      // 删除已完成
      todoList.value.splice(i, 1)
    }

    // 监听todos的变化
    watch(
      () => props.todos,
      (nvalue, ovalue) => {
        todoList.value.push(nvalue)
      }
    )
    return {
      todoList,
      finish
    }
  }
}
</script>

Finish.vue：

<template>
  <div class="todo_container">
    <div class="title">已完成</div>
    <transition-group enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
      <li v-for="(item,index) in finishList" :key="item" class="item">
        {{ item }}
        <button @click="removeFinished(index)">删除</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'Finish',
  props: {
    finish: String
  },
  setup(props) {
    let finishList = ref([])

    // 删除
    let removeFinished = i => {
      finishList.value.splice(i, 1)
    }

    watch(
      () => props.finish,
      (nvalue, ovalue) => {
        finishList.value.push(nvalue)
      }
    )
    return {
      finishList,
      removeFinished
    }
  }
}
</script>

演示：

世间万物皆有定数，唯有人心可以超越命运，创造奇迹！