尝鲜 Vue 3.0：Todo 列表之旅（1）

前端

2023-11-28 18:56:49

踏上 Vue 3.0 的前端之旅

在当今快速发展的互联网世界，构建用户友好且响应迅速的 Web 应用程序变得愈发重要。Vue 3.0 作为一款备受瞩目的 JavaScript 框架，以其简洁的语法、强大的功能和出色的性能，成为构建单页应用（SPA）的热门之选。

起航：从 Todo 列表开始

为了让大家更好地理解和掌握 Vue 3.0 的精髓，我们将从一个简单的 Todo 列表应用开始我们的探索之旅。这个 Todo 列表将具备以下基本功能：

创建新的待办事项
更新和编辑现有待办事项
删除不需要的待办事项
标记待办事项为已完成

Vue 3.0 带来的全新体验

与 Vue 2.x 相比，Vue 3.0 引入了诸多激动人心的特性，让构建应用程序更加轻松高效。这些特性包括：

更好的性能：Vue 3.0 采用了更快的虚拟 DOM 实现，提高了渲染速度和应用程序的整体性能。
增强的响应性：Vue 3.0 采用了新的响应式系统，使数据更新更加迅速和高效。
更简洁的语法：Vue 3.0 简化了模板语法，使代码更加易读和易于维护。
强大的组合 API：Vue 3.0 引入了新的组合 API，提供了更灵活的组件创建方式。

迈出第一步：搭建项目脚手架

在开始构建 Todo 列表应用之前，我们需要搭建一个项目脚手架。您可以使用 Vue CLI（Vue 命令行界面）轻松创建脚手架。只需运行以下命令即可：

vue create todo-list

构建应用：Todo 列表初体验

现在，让我们开始构建 Todo 列表应用。首先，我们需要在 src 目录下创建一个名为 App.vue 的文件。该文件将作为应用的主组件。

在 App.vue 文件中，我们需要添加以下代码：

<template>
  <div id="app">
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span>{{ todo.title }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoTitle" placeholder="Add a new todo">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

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

export default {
  setup() {
    const todos = ref([
      { id: 1, title: 'Learn Vue 3', completed: false },
      { id: 2, title: 'Build a Todo List', completed: true },
      { id: 3, title: 'Master JavaScript', completed: false }
    ]);

    const newTodoTitle = ref('');

    const addTodo = () => {
      if (newTodoTitle.value.trim()) {
        todos.value.push({
          id: todos.value.length + 1,
          title: newTodoTitle.value,
          completed: false
        });
        newTodoTitle.value = '';
      }
    }

    const removeTodo = (todo) => {
      todos.value = todos.value.filter(t => t !== todo);
    }

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