Vue实战：一步步教你打造todolist应用

"这篇文章主要介绍了如何使用Vue.js框架构建一个简单的todolist应用。作者通过介绍如何使用vue-cli初始化项目，然后逐步讲解如何在Vue组件中编写代码，实现todolist的基本功能，包括显示列表、判断任务完成状态、动态添加任务以及切换任务状态。" 在本文中，我们将探讨使用Vue.js开发一个基本的todolist应用程序的步骤。Vue.js是一个流行的前端JavaScript框架，它简化了构建用户界面的过程。为了快速启动项目，我们可以借助vue-cli，这是一个命令行工具，用于自动生成项目结构。 首先，确保已经全局安装了vue-cli。在命令行中运行以下命令来安装： ```bash npm install -g vue-cli ``` 接着，创建一个新的Vue项目，使用webpack模板： ```bash vue init webpack my-project ``` 进入项目目录并安装依赖： ```bash cd my-project npm install ``` 最后，启动开发服务器： ```bash npm run dev ``` 这将启动一个热重载的本地开发服务器，允许我们在浏览器中实时预览项目。 项目目录结构生成后，我们需要关注的是`webpack.base.conf.js`文件，它是webpack配置的核心，定义了入口和输出。Vue应用的入口文件是`./src/main.js`，在这里我们初始化Vue实例，并引入组件。 在`App.vue`组件中，我们将编写todolist的代码。为了显示todo列表，我们可以创建一个`<template>`，包含一个输入框和一个列表： ```html <template> <div id="app"> <input /> <ul> <li v-for="item in items" :key="item.label"> {{ item.label }} </li> </ul> </div> </template> ``` 同时，在`<script>`部分定义数据： ```javascript <script> export default { data() { return { items: [ { label: 'read books', isFinished: false, }, { label: 'eat dinner', isFinished: true, }, ], }; }, }; </script> ``` 现在，我们可以看到列表被渲染出来了。为了根据任务完成状态添加样式，可以使用Vue的条件类绑定： ```html <li v-for="item in items" :key="item.label" :class="{ finished: item.isFinished }"> {{ item.label }} </li> ``` 在CSS中定义`.finished`类，当`isFinished`为true时，任务将显示为已完成样式，例如添加`text-decoration: line-through`。 接下来，我们需要添加功能，如动态添加任务。可以通过监听`keyup`事件并在输入框中按回车键时触发添加： ```html <input v-model="newItem" @keyup.enter="addItem" /> ``` 在`<script>`中添加对应的处理函数： ```javascript methods: { addItem() { this.items.push({ label: this.newItem, isFinished: false }); this.newItem = ''; }, }, ``` 最后，为每个任务添加点击事件，切换任务的完成状态： ```html <li v-for="item in items" :key="item.label" @click="toggleFinished(item)" :class="{ finished: item.isFinished }"> {{ item.label }} </li> ``` 在`methods`中添加`toggleFinished`方法： ```javascript methods: { toggleFinished(item) { item.isFinished = !item.isFinished; }, }, ``` 至此，一个简单的todolist应用已经完成。通过Vue的数据绑定和组件化特性，我们轻松实现了显示、样式控制、动态添加和状态切换等功能。在实际开发中，还可以进一步完善应用，例如添加删除任务、编辑任务、保存和恢复状态等功能。