Vue 教程：打造一个功能完善的任务管理应用

Vue是一款非常流行的JavaScript框架，用于构建用户界面。它简单易学，同时又非常强大和灵活。在本教程中，我们将使用Vue来打造一个功能完善的任务管理应用，通过这个例子，你将学到如何使用Vue构建实际项目。

1. 准备工作

在开始之前，我们需要确保你已经安装了Node.js和npm。如果没有的话，请先下载并安装它们。

接下来，我们使用npm来安装Vue CLI（命令行工具），它可以帮助我们快速搭建Vue项目。打开终端，运行以下命令：

npm install -g @vue/cli

安装完成后，我们可以通过运行以下命令来创建新的Vue项目：

vue create task-manager

根据提示选择需要的配置，等待安装完成。一旦安装完成，我们就可以进入项目目录并启动开发服务器。

2. 创建任务列表组件

首先，让我们创建一个任务列表组件。在src/components目录下创建一个名为TaskList.vue的文件，并在其中编写以下代码：

<template>
  <div>
    <h3>任务列表</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, title: '完成Vue教程', completed: false },
        { id: 2, title: '学习Vue路由', completed: false },
        { id: 3, title: '编写任务管理应用', completed: false }
      ]
    };
  }
};
</script>

<style scoped>
h3 {
  color: blue;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}
</style>

在上面的代码中，我们定义了一个tasks数组，它包含了任务的列表。然后，使用v-for指令来遍历这个数组，并把每个任务的标题显示出来。

3. 添加新任务功能

接下来，我们要添加一个添加新任务的功能。在TaskList.vue文件中的<template>标签中添加以下代码：

<input type="text" v-model="newTaskText" placeholder="请输入任务标题">
<button @click="addNewTask">添加任务</button>

然后，在data属性中添加一个newTaskText变量，并在methods属性中添加一个addNewTask方法，如下所示：

data() {
  return {
    ...
    newTaskText: ''
  };
},
methods: {
  addNewTask() {
    if (this.newTaskText !== '') {
      const newTask = {
        id: this.tasks.length + 1,
        title: this.newTaskText,
        completed: false
      };
      this.tasks.push(newTask);
      this.newTaskText = '';
    }
  }
}

现在，我们可以在任务列表中输入新任务的标题，并点击“添加任务”按钮来添加它。一旦添加成功，你将看到新任务出现在任务列表中。

4. 标记任务完成

下一步，我们要实现标记任务完成的功能。在TaskList.vue文件中更新代码如下：

<template>
  <div>
    <h3>任务列表</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, title: '完成Vue教程', completed: false },
        { id: 2, title: '学习Vue路由', completed: false },
        { id: 3, title: '编写任务管理应用', completed: false }
      ]
    };
  }
};
</script>

<style scoped>
h3 {
  color: blue;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}
</style>

然后，在methods属性中添加一个markTaskAsCompleted方法：

methods: {
  ...
  markTaskAsCompleted(task) {
    task.completed = true;
  }
}

现在，当你点击“标记完成”按钮时，相应的任务将被标记为已完成，并且在界面上显示为斜体。

5. 删除任务

最后，我们添加一个删除任务的功能。在TaskList.vue文件中更新代码如下：

然后，在methods属性中添加一个deleteTask方法：

methods: {
  ...
  deleteTask(task) {
    const index = this.tasks.indexOf(task);
    if (index > -1) {
      this.tasks.splice(index, 1);
    }
  }
}

现在，当你点击“删除任务”按钮时，相应的任务将从任务列表中删除。

结尾

通过这个例子，我们成功地使用Vue构建了一个功能完善的任务管理应用。我们学习了如何创建组件、使用v-for指令渲染数据、添加新任务、标记任务完成以及删除任务。希望你通过这个例子对Vue有了更深入的了解，并能够运用它来构建自己的项目。

如果你想进一步扩展这个应用，可以尝试添加更多功能，比如编辑任务、过滤任务等。祝你在Vue的世界里编写出更多优秀的应用！

用它们。希望本教程对您有所帮助，您可以继续扩展这个应用，添加更多的功能以满足自己的需求。