江苏建站服务,莱西市城乡建设局网站,企业公示网,上海app开发定制公司前言#xff1a;本文介绍的是如何从0开始搭建Vue2项目到1实现对任务添加、删除和筛选的功能#xff0c;#x1f517; 相关链接Vue 入门(安装与应用超详细教程) ❤ 【作者主页—#x1f4da;阅读更多优质文章、获取更多优质源码】 目录
一 . 项目搭建
1.1 安装node.js
1.… 前言本文介绍的是如何从0开始搭建Vue2项目到1实现对任务添加、删除和筛选的功能 相关链接Vue 入门(安装与应用超详细教程) ❤ 【作者主页—优质文章、获取更多优质源码】 目录
一 . 项目搭建
1.1 安装node.js
1.2 配置环境变量
1.3 创建Vue项目
二. 打开项目
三. 运行项目
四. 项目展示
五. 更多干货 一 . 项目搭建
1.1 安装node.js
官网下载 | Node.js 中文网根据自己的系统进行选择 下载完成之后将.zip文件进行解压然后 winR 输入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 vue2
在项目目录下安装 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.cssVue.use(ElementUI)Vue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)
接着编写App.vue添加以下template部分代码
templatediv idapph3To Do List/h3el-form :inlinetrue classadd-task-formel-form-itemel-select v-modelselectedType placeholder请选择类型el-option label普通任务 valuenormal/el-optionel-option label重要任务 valueimportant/el-optionel-option label紧急任务 valueurgent/el-option/el-select/el-form-itemel-form-itemel-input v-modelnewTask placeholder请输入新的任务/el-input/el-form-itemel-form-itemel-button typeprimary clickaddTask添加任务/el-button/el-form-item/el-form.....................................
/template el-form是 Element UI 的表单组件:inlinetrue使其内联显示el-form-item是表单项组件el-select是下拉选择框v-modelselectedType将用户选择的值绑定到 Vue 实例的selectedType数据属性上el-option是下拉选项el-input是输入框v-modelnewTask将用户输入的值绑定到newTask数据属性el-button是按钮typeprimary设置为主要按钮样式clickaddTask绑定了点击事件点击时调用addTask方法。 接着写以下任务列表表格的实现代码
template...........此处代码省略衔接上个代码块................el-table :datafilteredTasks border stylewidth: 100%el-table-column propname label任务名称/el-table-columnel-table-column label任务类型template #defaultscopeel-tag :typegetTagType(scope.row.type){{scope.row.type}}/el-tag/template/el-table-columnel-table-column label任务状态template #defaultscopeel-tag :typegetTagStatusType(scope.row.status){{scope.row.status}}/el-tag/template/el-table-columnel-table-column label操作template #defaultscopeel-button sizemini iconel-icon-check clickcompleteTask(scope.row) v-ifscope.row.status 未完成/el-buttonel-button sizemini typeprimary iconel-icon-edit clickeditTask(scope.row)/el-buttonel-button sizemini typedanger iconel-icon-delete clickdeleteTask(scope.row)/el-button/template/el-table-column/el-table................................
/template el-table是表格组件:datafilteredTasks绑定了要展示的数据filteredTasks是计算属性通过el-tag组件展示任务类型和状态并根据不同类型调用getTagType和getTagStatusType方法设置标签样式。“操作” 列包含三个按钮 接下来添加以下任务统计信息和筛选框的代码
template...................................div classtask-summary共{{tasks.length}}项任务 已完成{{completedTasks.length}}项任务 未完成{{uncompletedTasks.length}}项任务/divel-row classfilter-rowel-col :span8el-select v-modelfilterType placeholder选择类型el-option label全部 valueall/el-optionel-option label普通任务 valuenormal/el-optionel-option label重要任务 valueimportant/el-optionel-option label紧急任务 valueurgent/el-option/el-select/el-colel-col :span8el-select v-modelfilterStatus placeholder选择状态el-option label全部 valueall/el-optionel-option label已完成 value已完成/el-optionel-option label未完成 value未完成/el-option/el-select/el-col/el-row/div
/templatediv标签展示任务统计信息通过插值表达式{{}}展示任务总数、已完成任务数和未完成任务数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.以上内容技术相关问题✉欢迎一起交流学习 ☟ ☟ ☟ ————————————————
