用vue3.0 实现todolist

在 Vue 3 中实现待办事项列表（To-Do List），你可以采用组件化的思想，创建一个基础的组件，比如`TodoItem.vue`，然后作为列表项来复用。下面是一个简单的示例：

1. 首先，安装Vue CLI并创建一个新的项目：

npm install -g @vue/cli
vue create todo-list-vue3
cd todo-list-vue3

2. 定义`TodoItem.vue`组件，表示单个待办事项：

<template>
  <li>
    <input type="checkbox" v-model="completed">
    <span>{{ title }}</span>
    <button @click="deleteItem">删除</button>
  </li>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      completed: false,
    };
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.title);
    },
  },
};
</script>

这里我们有一个文本输入框用于添加标题，一个复选框表示完成状态，以及一个删除按钮。

3. 创建一个`TodoList.vue`组件来管理整个列表，并处理事件：

<template>
  <div>
    <h1>待办事项列表</h1>
    <input v-model="newTodo" placeholder="添加新任务...">
    <button @click="addTodo">添加</button>
    <ul>
      <todo-item v-for="(item, index) in todos" :key="index" :title="item.title" :completed="item.completed"
        @delete-item="removeItem(index)">
      </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoItem,
  },
  data() {
    return {
      newTodo: '',
      todos: [],
    };
  },
  methods: {
    addTodo() {
      this.todos.push({ title: this.newTodo, completed: false });
      this.newTodo = '';
    },
    removeItem(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

在这个组件里，用户可以添加新的待办事项，每个`TodoItem`会监听`delete-item`事件来移除对应的事项。