前言：本文介紹的是如何從0開始搭建Vue2項目到1實現對任務添加、刪除和篩選的功能，🔗?相關鏈接Vue 入門(安裝與應用超詳細教程)

---

??【作者主頁—📚優質文章、獲取更多優質源碼】

目錄

一 . 項目搭建

1.1 安裝node.js

1.2 配置環境變量

1.3 創建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 = falsenew 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.以上內容技術相關問題?歡迎一起交流學習 ? ? ? ? ?
————————————————