用vue3实现todolist

在 Vue 3 中实现一个简单的 To-Do 列表（To-Do List）可以通过以下步骤完成：

1. **安装依赖**:
首先确保已安装 Vue CLI 和 Vue 3。如果尚未安装，运行 `npm install -g @vue/cli` 并创建一个新的项目。

2. **创建组件**:
在 `src/components` 目录下创建 `TodoList.vue` 文件，定义 To-Do 列表组件。基本结构如下：

<template>
  <div class="todo-list">
    <h1>To-Do List</h1>
    <input v-model="newTodo" placeholder="Add a new todo...">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义状态变量
const newTodo = ref('');
const todos = ref([]);

// 添加任务方法
function addTodo() {
  if (newTodo.value.trim()) {
    todos.push(newTodo.value);
    newTodo.value = '';
  }
}

// 删除任务方法
function removeTodo(index) {
  todos.value.splice(index, 1);
}
</script>

<style scoped>
.todo-list {
  display: flex;
  flex-direction: column;
}
</style>

3. **父组件引入并使用**:
在 App.vue 或者其他合适的父组件中引入并使用这个 To-Do 列表组件：

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue';

export default {
  components: {
    TodoList,
  },
};
</script>

现在，你已经实现了基本的 To-Do 列表功能，用户可以在输入框添加待办事项，点击“添加”按钮添加，单击每一项右侧的删除按钮则可以移除该事项。

**相关问题：**
1. 如何在 Vue 3 中声明和管理组件的状态？
2. Vue 3 的 `ref` 是什么？如何在模板中引用？
3. 为什么要在模板中使用 `v-model` 和 `@click`？