从零开始：使用 Vue 3 构建你的第一个 Todo List 应用

简介

在现代的前端开发中，Vue.js 作为一款流行的前端框架，有着极大的用户基础和众多的应用实例。特别是 Vue 3 引入的 Composition API 和 setup 语法糖，让我们在构建组件时更加灵活和简洁。在本文中，我们将引导你从零开始，构建一个简单的 Todo List 应用，并使用 Vue 3 的 setup 语法糖来实现功能。

准备工作

在开始之前，请确保你的开发环境中已安装 Node.js 和 npm。接下来，我们将在本地创建一个新的 Vue 3 项目。你可以使用 Vue CLI 来快速搭建一个开发环境。

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

在创建项目时，选择 Vue 3 的选项。完成后，进入项目目录并启动开发服务器：

cd todo-list
npm run serve

打开浏览器并访问 http://localhost:8080，你应该能够看到 Vue 的欢迎页面。

创建 Todo List 组件

接下来，我们将创建一个 Todo List 组件。在 src/components 文件夹中创建一个名为 TodoList.vue 的新文件：

<template>
  <div class="todo-list">
    <h1>我的 Todo List</h1>
    <input v-model="newTodo" placeholder="添加新的任务..." @keyup.enter="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({ text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    };

    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    };

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

<style>
.completed {
  text-decoration: line-through;
}
.todo-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
  width: calc(100% - 42px);
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-left: 10px;
  color: white;
  background-color: #FF5722;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
}
</style>

代码解析

Template:
- 我们在模板中定义了一个输入框，用于添加新的任务。输入框使用 v-model 与 newTodo 变量进行双向绑定。
- 通过 v-for 指令循环遍历 todos 数组，并渲染每个任务。每个任务旁边都有一个复选框和一个删除按钮。
Script:
- 我们使用 ref 创建响应式数据 newTodo 和 todos。
- addTodo 函数：当用户按下回车键时，将输入框中的内容添加到 todos 数组中，并清空输入框。
- removeTodo 函数：根据索引从 todos 数组中删除对应的任务。
Style:
- 样式部分为 Todo List 组件添加了基本的样式，使其看起来更加美观。你可以根据自己的需求进行更改和扩展。

使用 TodoList 组件

现在我们已经完成了 Todo List 组件的创建，接下来在 src/App.vue 中使用这个组件。

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

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

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

完成应用

到此为止，你的 Todo List 应用已经完成。你可以在浏览器中刷新页面，尝试添加和删除任务，查看其功能。

结尾

这个简单的 Todo List 应用演示了 Vue 3 的 setup 语法糖的强大功能，使得我们在构建应用时可以更加清晰地组织代码。你可以在这个基础上继续扩展，比如添加任务的编辑功能、使用 localStorage 持久化数据、更改任务的排序、甚至添加标签等，这些都可以大大提升你的应用可用性。

随着你对 Vue 3 掌握的深入，你会发现这个框架不仅仅是在构建界面，更是开发高效、可维护的现代 Web 应用的强大工具。期待你在前端开发的道路上越走越远，利用 Vue.js 构建出更多精彩的应用！

复制全文生成海报前端框架 Web开发编程 Vue.js 应用开发

编程 Vue3从零开始构建一个简单的TodoList应用