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

个人名片

🎓作者简介：java领域优质创作者
🌐个人主页：码农阿豪
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[2435024119@qq.com]
📱个人微信：15279484656
🌐个人导航网站：www.forff.top
💡座右铭：总有人要赢。为什么不能是我呢？

• 专栏导航：

码农阿豪系列专栏导航
面试专栏：收集了java相关高频面试题，面试实战总结🍻🎉🖥️
Spring5系列专栏：整理了Spring5重要知识点与实战演练，有案例可直接使用🚀🔧💻
Redis专栏：Redis从零到一学习分享，经验总结，案例实战💐📝💡
全栈系列专栏：海纳百川有容乃大，可能你想要的东西里面都有🤸🌱🚀

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的开发技巧与案例！