在Vue 3中实现一个简单待办事项应用

在现代前端开发过程中，待办事项应用通常是新手学习框架的第一个项目。在这篇博客中，我们将使用Vue 3的Composition API和setup语法糖，手把手地引导您构建一个简单的待办事项应用。通过这个应用，您将了解Vue 3的一些基本概念以及如何使用setup函数。

项目结构

首先，我们需要创建一个基本的项目结构。在项目的根目录下，我们可以将文件组织如下：

todo-app/
│
├── src/
│   ├── components/
│   │   ├── TodoList.vue
│   │   ├── TodoInput.vue
│   ├── App.vue
│   └── main.js
├── index.html
└── package.json

接下来，我们将逐步实现每个组件。

第一步：初始化Vue项目

首先，我们来创建一个新的Vue 3项目。您可以使用Vue CLI来创建项目。在终端中输入以下命令：

npm install -g @vue/cli
vue create todo-app

在创建过程中，选择Vue 3并根据您的需求选择其他配置。创建完毕后，进入项目目录 cd todo-app。

第二步：构建主应用组件

在 src 文件夹中找到 App.vue，这里是我们的主应用组件。我们将使用它来渲染待办事项列表和输入框。

<template>
  <div id="app">
    <h1>我的待办事项应用</h1>
    <TodoInput @addTodo="addTodo" />
    <TodoList :todos="todos" @removeTodo="removeTodo" />
  </div>
</template>

<script>
import { ref } from 'vue';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoInput,
    TodoList
  },
  setup() {
    const todos = ref([]);
    
    // 添加待办事项
    const addTodo = (todo) => {
      todos.value.push({ text: todo, completed: false });
    };
    
    // 删除待办事项
    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    };

    return {
      todos,
      addTodo,
      removeTodo
    };
  }
};
</script>

<style>
#app {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
</style>

在上面的代码中，我们使用 setup() 函数来定义应用的响应式数据和方法。我们使用了Vue 3的 ref 函数来创建一个响应式的待办事项数组 todos，并定义了 addTodo 和 removeTodo 方法来添加和删除待办事项。

第三步：创建输入组件

接下来，我们需要创建一个输入组件 TodoInput.vue，用于输入新的待办事项。

<template>
  <div>
    <input v-model="newTodo" placeholder="输入待办事项" @keyup.enter="submitTodo" />
    <button @click="submitTodo">添加</button>
  </div>
</template>

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

export default {
  name: 'TodoInput',
  emits: ['addTodo'],
  setup(_, { emit }) {
    const newTodo = ref('');

    const submitTodo = () => {
      if (newTodo.value.trim()) {
        emit('addTodo', newTodo.value.trim());
        newTodo.value = '';
      }
    };

    return {
      newTodo,
      submitTodo
    };
  }
};
</script>

<style>
input {
  padding: 10px;
  width: 70%;
  margin-right: 10px;
}
button {
  padding: 10px;
}
</style>

在 TodoInput 组件中，我们使用 v-model 指令来实现双向绑定，使输入框的值与 newTodo 响应式变量关联。当用户按下回车键或点击“添加”按钮时，调用 submitTodo 方法并通过 $emit 发出 addTodo 事件。

第四步：创建待办事项列表组件

接下来创建 TodoList.vue 组件，它用于显示待办事项列表。

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
      <button @click="removeTodo(index)">删除</button>
      <input type="checkbox" v-model="todo.completed" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  emits: ['removeTodo'],
  setup(props, { emit }) {
    const removeTodo = (index) => {
      emit('removeTodo', index);
    };

    return {
      removeTodo
    };
  }
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: gray;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

在 TodoList 组件中，我们通过 v-for 指令遍历传入的 todos 属性，并为每个待办事项渲染一个列表项。每个待办事项旁边有一个删除按钮和一个复选框，用于标记待办事项是否完成。

第五步：整合与测试

到此，所有的组件都已经准备好了，我们只需返回到 index.html，确保我们的Vue应用能够正常运行。在终端中启动开发服务器：

npm run serve

如果一切正常，您将在浏览器中看到 “我的待办事项应用” 的标题以及输入框和待办事项列表。您可以添加待办事项，并通过复选框标记它们是否完成。在待办事项旁边还可以点击删除按钮来移除它们。

总结

在这篇教程中，我们使用Vue 3和setup语法糖实现了一个简单的待办事项应用。在这个过程中，我们学习了如何创建组件、使用Composition API的 setup 函数来管理状态，以及如何通过事件机制在组件之间进行通信。

通过这个项目，您可以奠定对Vue 3开发的基本理解，未来可以扩展更多功能，例如持久化存储、编辑待办事项等。