前言：本文介绍的是如何从0开始搭建Vue2项目到1实现对任务添加、删除和筛选的功能，🔗 相关链接Vue 入门(安装与应用超详细教程)
目录
一 . 项目搭建
1.1 安装node.js
官网：下载 | Node.js 中文网，根据自己的系统进行选择
下载完成之后，将.zip文件进行解压，然后 win+R 输入cmd输出node -v，有版本号即安装成功
1.2 配置环境变量
右键此电脑选择属性->高级系统设置->环境变量->系统变量->双击Path->新建->输入解压后的文件夹路径，如D:\env\node-v22.15.0-win-x64\node-v22.15.0-win-x64，最后一定要点击三次确定
1.3 创建Vue项目
使用 Vue CLI 创建项目，右键命令提示符，选择以管理员身份运行，执行以下命令
npm install -g @vue/cli
vue create todo-list # 创建一个名为todo-list的Vue项目
下一步进入项目目录
cd todo-list安装 Vue 2
npm install vue@2在项目目录下安装 Element UI
npm i element-ui -S
执行完以上步骤后，创建Vue项目完成，如下图所示
二. 打开项目
使用vscode、hbuilder等工具打开都可以，目录结构如下
在 main.js 中引入 Element UI，打开src/main.js，添加以下代码
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')接着编写App.vue，添加以下<template>部分代码
<template>
<div id="app">
<h3>To Do List</h3>
<el-form :inline="true" class="add-task-form">
<el-form-item>
<el-select v-model="selectedType" placeholder="请选择类型！">
<el-option label="普通任务" value="normal"></el-option>
<el-option label="重要任务" value="important"></el-option>
<el-option label="紧急任务" value="urgent"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="newTask" placeholder="请输入新的任务！"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addTask">添加任务</el-button>
</el-form-item>
</el-form>
.....................................
</template>el-form是 Element UI 的表单组件，:inline="true"使其内联显示，el-form-item是表单项组件，el-select是下拉选择框，v-model="selectedType"将用户选择的值绑定到 Vue 实例的selectedType数据属性上，el-option是下拉选项，el-input是输入框，v-model="newTask"将用户输入的值绑定到newTask数据属性，el-button是按钮，type="primary"设置为主要按钮样式，@click="addTask"绑定了点击事件，点击时调用addTask方法。
接着写以下任务列表表格的实现代码
<template>
...........此处代码省略，衔接上个代码块................
<el-table :data="filteredTasks" border style="width: 100%">
<el-table-column prop="name" label="任务名称"></el-table-column>
<el-table-column label="任务类型">
<template #default="scope">
<el-tag :type="getTagType(scope.row.type)">{{scope.row.type}}</el-tag>
</template>
</el-table-column>
<el-table-column label="任务状态">
<template #default="scope">
<el-tag :type="getTagStatusType(scope.row.status)">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="mini" icon="el-icon-check" @click="completeTask(scope.row)" v-if="scope.row.status === '未完成'"></el-button>
<el-button size="mini" type="primary" icon="el-icon-edit" @click="editTask(scope.row)"></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteTask(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
................................
</template>
el-table是表格组件，:data="filteredTasks"绑定了要展示的数据，filteredTasks是计算属性，通过el-tag组件展示任务类型和状态，并根据不同类型调用getTagType和getTagStatusType方法设置标签样式。“操作” 列包含三个按钮
接下来添加以下任务统计信息和筛选框的代码
<template>
...................................
<div class="task-summary">
共{{tasks.length}}项任务
已完成{{completedTasks.length}}项任务
未完成{{uncompletedTasks.length}}项任务
</div>
<el-row class="filter-row">
<el-col :span="8">
<el-select v-model="filterType" placeholder="选择类型！">
<el-option label="全部" value="all"></el-option>
<el-option label="普通任务" value="normal"></el-option>
<el-option label="重要任务" value="important"></el-option>
<el-option label="紧急任务" value="urgent"></el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="filterStatus" placeholder="选择状态！">
<el-option label="全部" value="all"></el-option>
<el-option label="已完成" value="已完成"></el-option>
<el-option label="未完成" value="未完成"></el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
div标签展示任务统计信息，通过插值表达式（{{}}）展示任务总数、已完成任务数和未完成任务数，el-row和el-col是 Element UI 的栅格布局组件，用于排版。两个el-select下拉框分别用于筛选任务类型和任务状态，v-model绑定对应数据属性，实现筛选功能。
接下来添加以下script代码，定义了组件的数据、计算属性和方法
<script>
export default {
data() {
return {
newTask: '',
selectedType: '',
tasks: [
{ name: '任务1', type: 'normal', status: '已完成' },
{ name: '任务2', type: 'important', status: '未完成' },
{ name: '任务3', type: 'urgent', status: '已完成' }
],
filterType: 'all',
filterStatus: 'all'
}
},
computed: {
filteredTasks() {
return this.tasks.filter(task => {
const typeMatch = this.filterType === 'all' || task.type === this.filterType;
const statusMatch = this.filterStatus === 'all' || task.status === this.filterStatus;
return typeMatch && statusMatch;
});
},
completedTasks() {
return this.tasks.filter(task => task.status === '已完成');
},
uncompletedTasks() {
return this.tasks.filter(task => task.status === '未完成');
}
},
methods: {
addTask() {
if (this.newTask.trim()!== '') {
this.tasks.push({
name: this.newTask,
type: this.selectedType,
status: '未完成'
});
this.newTask = '';
this.selectedType = '';
}
},
completeTask(task) {
task.status = '已完成';
},
editTask(task) {
console.log('编辑任务', task);
},
deleteTask(task) {
const index = this.tasks.indexOf(task);
if (index > -1) {
this.tasks.splice(index, 1);
}
},
getTagType(type) {
switch (type) {
case 'normal':
return 'info';
case 'important':
return 'warning';
case 'urgent':
return 'danger';
default:
return 'info';
}
},
getTagStatusType(status) {
return status === '已完成'? 'green' : 'default';
}
}
}
</script>最后，定义了组件内一些元素的局部样式，给添加任务表单、筛选框所在行和任务统计信息区域设置了外边距等样式
<style scoped>
.add-task-form {
margin-bottom: 20px;
}
.filter-row {
margin-top: 20px;
}
.task-summary {
text-align: right;
margin-top: 10px;
}
</style>三. 运行项目
在项目的根目录下执行以下命令 ，如下图项目启动成功，然后浏览器访问 http://localhost:8080/
npm run serve
四. 项目展示
进入页面后默认显示任务1、2、3 ，以下任务4、5、6是我添加的，如下图所示
下图是以任务类型进行的一级筛选
下图是以任务类型和未完成的任务进行的二级筛选
五. 更多干货
--------------------- - -----✈--------- ---------✈--------------------✈-------
1.如果我的博客对你有帮助或你喜欢我的博客内容，请 “👍点赞” “✍️评论” “★收藏” 一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、微信小程序模板 、等! 「在这里一起探讨知识，互相学习」！
3.以上内容技术相关问题✉欢迎一起交流学习 ☟ ☟ ☟
————————————————
扫一扫
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
