使用Vue完成一个简单的todolist的方法

来源：互联网 2023-03-16 23:57:17 80

使用Vue完成一个简单的todolist的方法。

工具/原料

JavaScript

方法/步骤

一、使用vue-cli脚手架快速搭建一个框架

利用vue-cli来自动生成我们项目的前端目录及文件，方法：

1、npm install -g vue-cli

2、vue init webpack my-project

3、cd my-project

4、npm install

5、npm run dev

这样我们的一个基于webpack的vue项目目录就可以快速构建好了。

目录如下：

使用Vue完成一个简单的todolist的方法

二、完成一个简单的todolist

接下来就看一下webpack.base.conf文件，这是核心文件，必须执行的文件，这里可以看到entry和output，这就是入口和输出路径，在入口处看到了./src/main.js，这就找到了界面的入口处了。在main.js中可以看到创建了一个vue实例，并加载了模板组件App.vue，所以我们的todo list代码就可以写在App.vue中。

简单的todolist我们可以完成这几个功能：

1、显示todo列表

2、判断列表任务完成状态，若完成则添加相应的样式

3、在输入框中动态添加todo项目，点击回车在列表中显示

4、点击相应的项目转换状态

首先我们完成显示列表的功能：

使用Vue完成一个简单的todolist的方法