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

从零开始：使用Vue3构建你的第一个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>

代码解析

1. Template:

   • 我们在模板中定义了一个输入框，用于添加新的任务。输入框使用v-model与newTodo变量进行双向绑定。
   • 通过v-for指令循环遍历todos数组，并渲染每个任务。每个任务旁边都有一个复选框和一个删除按钮。

2. Script:

   • 我们使用ref创建响应式数据newTodo和todos。
   • addTodo函数：当用户按下回车键时，将输入框中的内容添加到todos数组中，并清空输入框。
   • removeTodo函数：根据索引从todos数组中删除对应的任务。

3. 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构建出更多精彩的应用！

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作