Vue.js入门系列（十六）：构建一个完整的TodoList应用

用户8589624

发布于 2025-11-14 09:09:46

880

文章被收录于专栏：nginxnginx

Vue.js入门系列（十六）：构建一个完整的TodoList应用

引言

在本篇博客中，我们将通过一个经典的TodoList案例，详细讲解如何使用Vue.js构建一个完整的应用程序。这篇文章将分为四个部分：首先构建TodoList的静态结构，然后初始化待办事项列表，接着实现添加新任务的功能，最后添加任务勾选功能。通过这个案例，你将进一步巩固对Vue.js的理解和应用。

一、TodoList案例：静态结构

1.1 创建基本模板

我们首先构建TodoList应用的基本静态结构。这部分主要包括HTML结构的定义，以及一些基础样式的设置。

<div id="app">
  <div class="todo-list">
    <h1>My Todo List</h1>
    <input type="text" placeholder="Add a new task" />
    <ul>
      <li>
        <input type="checkbox" />
        <span>Example Task</span>
      </li>
    </ul>
  </div>
</div>

<style>
  .todo-list {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }

  h1 {
    text-align: center;
  }

  input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  li span {
    margin-left: 10px;
  }
</style>

在这一步，我们创建了一个简单的静态页面，包含一个输入框、任务列表和一些样式。

二、TodoList案例：初始化列表

2.1 初始化待办事项数据

接下来，我们将初始化TodoList列表，并将任务列表从静态HTML转换为动态渲染。

<div id="app">
  <div class="todo-list">
    <h1>My Todo List</h1>
    <input type="text" v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" :checked="task.completed" @change="toggleTask(task)" />
        <span :class="{ completed: task.completed }">{{ task.text }}</span>
      </li>
    </ul>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: [
      { id: 1, text: 'Learn JavaScript', completed: false },
      { id: 2, text: 'Learn Vue.js', completed: true },
      { id: 3, text: 'Build something awesome', completed: false }
    ]
  },
  methods: {
    addTask() {
      // 添加任务的功能会在下一节详细介绍
    },
    toggleTask(task) {
      // 勾选任务的功能会在后续介绍
    }
  }
});

在这一步中，我们引入了v-for指令来循环渲染任务列表。每个任务包含text和completed状态，并通过v-model绑定到输入框。我们还为输入框添加了@keyup.enter事件监听器，以便在按下Enter键时添加新任务。

三、TodoList案例：添加新任务

3.1 实现添加任务功能

接下来，我们将实现添加新任务的功能。每当用户输入一个新任务并按下Enter键时，这个任务将被添加到任务列表中。

methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({
        id: this.tasks.length + 1,
        text: this.newTask,
        completed: false
      });
      this.newTask = '';
    }
  }
}

在这个方法中，addTask首先检查输入框是否为空，如果不为空，则创建一个新的任务对象并将其添加到tasks数组中。任务添加后，输入框会被清空以便用户输入下一个任务。

四、TodoList案例：任务勾选功能

4.1 实现任务勾选功能

最后，我们将实现勾选任务的功能。当用户点击复选框时，任务的完成状态将被切换。

methods: {
  toggleTask(task) {
    task.completed = !task.completed;
  }
}

在这个方法中，toggleTask接受一个任务对象，并将其completed状态反转。当用户点击复选框时，任务的状态将在已完成和未完成之间切换。

4.2 样式更新

为了让用户更直观地看到任务的完成状态，我们可以通过更新样式来实现。

.completed {
  text-decoration: line-through;
  color: #888;
}

将这个样式添加到之前的CSS中，然后使用v-bind指令在任务的span元素上动态添加completed类。

<span :class="{ completed: task.completed }">{{ task.text }}</span>

这样，当任务被标记为已完成时，任务文本将会被划掉，并且颜色变灰。

五、总结

通过这篇博客，我们构建了一个简单但功能齐全的TodoList应用。我们从静态结构开始，逐步添加了初始化列表、添加任务和勾选任务等功能。这个案例不仅展示了Vue.js的基础使用方法，还帮助你理解如何将Vue.js应用到实际项目中，逐步构建复杂的用户界面。

静态结构：定义了应用的基本布局和样式。
初始化列表：通过v-for动态渲染任务列表。
添加任务：实现了用户输入新任务并添加到列表的功能。
勾选任务：添加了任务完成状态的切换功能，并通过动态样式更新UI。

在接下来的博客中，我们将继续探讨Vue.js的更多高级功能和实际应用。如果你有任何问题或需要进一步的帮助，欢迎在评论区留言交流。期待在下一篇博客中继续与大家分享更多Vue.js的开发技巧与案例！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-08-26，如有侵权请联系 cloudcommunity@tencent.com 删除

对象

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度