用vue.js写案例——ToDoList待办事项 （步骤和全码解析）

2024-04-09 09:36
文章标签 javascript 步骤 vue js 解析 案例 frontend todolist 事项 待办 全码

本文主要是介绍用vue.js写案例——ToDoList待办事项 （步骤和全码解析），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

目录

 

一.准备工作

二.编写各个组件的页面结构

三.实现初始任务列表的渲染

四.新增任务

五.删除任务

六.展示未完成条数

七.切换状态-筛选数据

八.待办事项（全）代码

 

一.准备工作

在开发“ToDoList”案例之前，需要先完成一些准备工作，包括创建项目、引入 BootStrap 样式文件和搭建基本项目结构，下面分别进行实现。

（1）创建项目 创建项目包含新建项目、安装依赖项和运行项目，具体步骤如下。

① 创建项目。使用HbuliderX软件创建todolist项目 在src的目录下创建style.css 文件中的样式，具体代码如下。

style.css样式如下：

:root {font-size: 16px;}body {margin: 0;}

② 新建并封装组件。在D:\vue\chapter03\todolist\src\components 目录下新建文件 ToDoHeader.vue、ToDoMain.vue 和 ToDoFooter.vue，分别表示 ToDoHeader、ToDoMain 和ToDoFooter 组件。

8e63932db2404753a837df16d181551d.png

③ 各个组件中的<style>节点的样式代码。

二.编写各个组件的页面结构

 

准备工作完成之后，接下来编写各个组件的页面结构，实现“ToDoList”案例静态页 面的渲染，具体步骤如下。

①在App组件中以局部注册的方式引入ToDoHeader、ToDoMain、ToDoFooter组 件

c3c81311e10c46ed8d4af3506e13323d.png

 ②在ToDoHeader组件中编写输入区域的页面结构

fa84afc733e6431191418e97f8e7b921.png

③ 在ToDoMain组件中编写列表区域的页面结构

d454f098d65d42879f1d913ac89dfaec.png

④ 在ToDoFooter组件中编写切换状态区域的页面结构

b4b2759ee9d34cfa9d07b7793531242c.png

三.实现初始任务列表的渲染

App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。即通过props（自定义属性）从父组件（App组件）向 子组件（ToDoMain组件）中传递数据。实现初始任务列表具体步骤如下。

① 在ToDoMain组件中定义可以从父组件中接收的数据

a31c454f08a842e1b18202f2846a1372.png

② 在App组件中定义页面的初始数据

125df32731374900b29c74a6803b1f8c.png

③ 通过自定义属性进行传递数据

47d152b81ad44c828177e4a41b85b208.png

④ 修改ToDoMain组件中的代码，将接收到的list数据进行展示。

c19b82dddc644fd28dfb1f4b3b5f775a.png

四.新增任务

“ToDoList”案例中在文本框中输入内容，按下回车后添加任务到任务列表，将用户 输入的任务名称通过自定义事件从ToDoHeader组件传递到App组件，具体步骤如下代码省略。、

① 修改ToDoHeader组件中的代码，添加页面的初始数据

6d477c062f894cdbbfb74230af780d7f.png

② 获取input输入框的值，修改ToDoHeader组件中的代码

e2f978b70c79453da8e14bc6880a4835.png

③ 修改ToDoHeader组件中的代码，为input输入框绑定回车事件，事件处理函数 名称为enterName

ad84ce526bed4199a8dcb8f571cc04c7.png

④ 修改ToDoHeader组件中的代码，通过调用defineEmits()方法来声明自定义事 件

c51b6c2960c146818afafc7959fb5a75.png

⑤ 在ToDoHeader组件中添加enterName()方法，通过调用emit()方法触发自定义事 件

db2bdeb5191f415a84bfdba34e1c07f9.png

⑥ 在App组件中监听addTodo自定义事件，当enterName事件触发时，调用 addToDo()方法

a9daf96d031d41678b31b2bd14c00741.png

⑦ 添加addToDo方法，实现数据的处理

ace429f781b54af6bfbf7bcd8b9ec848.png

 

五.删除任务

当鼠标指针滑到任务列表中每一项时，在右侧会出现“×”图标，单击该图标即可 进行删除当条任务操作。首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。

① 在ToDoMain组件中，声明自定义事件delTodo，用于表示删除任务

5d51e85dcec5496a8a303f7a5bc1487b.png

② 在ToDoMain组件中定义delToDo()方法，触发自定义事件

716fdb98ccb34973b645bb753a6a2951.png

③ 修改删除按钮的代码，添加点击事件，传入需要删除的id

c76f6242dd4149dca4fc6d338dc9960d.png

④ 在App组件中监听

8f6d8267e865479199613869cb1903a9.png

⑤ 在App组件中添加delToDo方法，进行列表中对应任务的删除操作

fa36dffbcd6c49bdaf6039b2037e4f6f.png

六.展示未完成条数

在任务状态区域的左侧会显示未完成任务的条数，接下来计算未完成任务的条数并 将其在页面中渲染出来，具体步骤如下代码省略。

① 在App组件中定义计算属性，计算未完成的任务条数

2f144a08ee2c4ef28d79cf9d9ae16d80.png

 ② 将自定义属性传给ToDoFooter组件

d383da5dd7ca4859afd92edf7556bdd7.png

③ 在ToDoFooter组件中接收lastLength

59df8f2739cb4906b48915600a70e5ba.png

④ 在ToDoFooter组件中将条数展示出来

34c37fc1d76241449ee53761ec7aa81b.png

七.切换状态-筛选数据

单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务，实现切换数据筛选 状态具体步骤如下代码省略。

① 首先在App组件中定义页面的使用一个任务状态状态属性status

8f854ba8fe7347eeb9aaaea69fda5b23.png

② 在App组件中通过不同的status展示不同的任务，实现任务数据的切换

d95eae8d69894ceb99decc19e70aea6e.png

③ 修改App组件，将showList传递给ToDoMain组件

f1b9a881a1b64f40b627ee1607e4849b.png

④ 设置自定义事件名称

c8834c8f03bc48629a187fe342700e35.png

⑤ 在ToDoFooter组件中定义props属性，表示从父组件中接收该数据

412a9b294236430aa57ba154e445b965.png

⑥ 在App组件中定义props，即从App组件中传递status到ToDoFooter组件中

cf37bcebc9604fdc98f334389fef354c.png

⑦ 在ToDoFooter组件中单击链接按钮时更改状态

6305a1604ccb407ba09d326aad030eb6.png

⑧ 在App组件中监听updateStatus自定义事件，通过自定义事件将status属性的值 从ToDoFooter组件传递到App组件中，具体代码如下

135af15de1264610997e645b41e0cd59.png

⑨ 定义updateStatus()方法，用来更新状态，具体代码如下。

b3e781afc384481e97d09d50c72f1102.png 

八.待办事项（全）代码

d1d6f8abbd6c4e7b8face81024650a43.png

ToDoFooter.vue代码：

<template><div class="footer"><span class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务</span><ul class="filters"><li><a @click.prevent="emit('updateStatus', 'completed')" :class="{ selected: status === 'completed' }"href="#/completed" style="background-color: lightblue;">Completed</a></li><li><a @click.prevent="emit('updateStatus', 'active')" :class="{ selected: status === 'active' }"href="#/active" style="background-color: lightblue;">Active</a></li><li><a @click.prevent="emit('updateStatus', 'all')" :class="{ selected: status === 'all' }" href="#/" style="background-color: lightblue;">All</a></li></ul></div>
</template><script setup>const props = defineProps(['lastLength','status'])</script><style>.filters{display:flex;flex-direction:row-reverse;/* 相反方向 */}ul{list-style: none;}ul li{padding-left:10px ;}a{text-decoration: none;border: 1px solid black;color: black;}
</style>

ToDoHeader.vue代码： 

<template><div><div class="header"><p class="title">待办事项</p><input class="new-todo" type="text" placeholder="请填写任务" v-model.trim="name"  @keyup.enter="enterName" /></div></div></template><script setup>import { ref } from 'vue'const name = ref('')const enterName = () => {emit('addTodo', name.value)name.value = ''}const emit = defineEmits(['addTodo'])</script><style>.title{border-bottom:1px solid grey;text-align:center;font-size:36px;color:brown;}.header{border:1px solid grey;}.new-todo{position: relative;top:-20px;left: 50px;border: none;font-size: 20px;}</style>

 ToDoMain.vue代码：

<template><div class="main"><ul class="todo-list"><li v-for="item in list" :key="item.id" :class="{ completed: item.done }"><div class="view"><input class="toggle" type="radio" v-model="item.done" /><label class="zi">{{ item.name }}</label><button class="destroy" @click="delTodo(item.id)"></button></div></li></ul></div></template><script setup>const props = defineProps({list: {type: Array,required: true},})const emit = defineEmits(['delTodo'])const delTodo = id => {id && emit('delToDo', id) // 触发事件}
</script><style>
.toggle{width: 30px;height: 30px;}
.view{margin-left: -40px;	
}
.zi{font-size: 18px;padding-left: 20px;}
.destroy{border: none;margin-left: 10px;
}
</style>

App.vue代码：


<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'
import { ref, computed, defineEmits } from 'vue'const emits = defineEmits(['updateStatus']) // 添加 defineEmits 声明const status = ref('all')
const list = ref([{ id: 1, name: '晨练', done: false },{ id: 2, name: '练书法', done: true },{id:3,name:'完成Vue.js组件部分习题',done:false},
])const addTodo = (name) => {list.value.push({ name, done: false, id: ~~(Math.random() * 1000) })
}const delToDo = id => {list.value = list.value.filter((item) => item.id !== id)
}const lastLength = computed(() => {return list.value.filter((item) => !item.done).length
})const showList = computed(() => {if (status.value === 'all') {return list.value}if (status.value === 'active') {return list.value.filter((item) => !item.done)}if (status.value === 'completed') {return list.value.filter((item) => item.done)}
})const updateStatus = (newStatus) => {status.value = newStatus;
}
</script><template><ToDoHeader @addTodo="addTodo"></ToDoHeader><!-- <ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain> --><ToDoMain :list="list" @delToDo="delToDo"></ToDoMain><ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></ToDoFooter>
</template><style></style>

 

main.js代码：

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

 最终效果图如下：

2582c94fd96e48b69449147ae380950a.png

 功能展示:

0b150a6ed583433d96aac86e66d0173a.png今天就分享到此，感谢预览~ 

 

 

这篇关于用vue.js写案例——ToDoList待办事项 （步骤和全码解析）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/887790。

相关文章

Window Server2016加入AD域的方法步骤

Window Server2016加入AD域的方法步骤

《WindowServer2016加入AD域的方法步骤》：本文主要介绍WindowServer2016加入AD域的方法步骤,包括配置DNS、检测ping通、更改计算机域、输入账号密码、重启服务... 目录一、 准备条件二、配置ServerB加入ServerA的AD域（test.ly）三、查看加入AD域后的变
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
Window Server2016 AD域的创建的方法步骤

Window Server2016 AD域的创建的方法步骤

《WindowServer2016AD域的创建的方法步骤》本文主要介绍了WindowServer2016AD域的创建的方法步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、准备条件二、在ServerA服务器中常见AD域管理器：三、创建AD域，域地址为“test.ly”
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
用Java打造简易计算器的实现步骤

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》：本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算（加、减、乘、除）,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标：一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标：简单计算器，设计
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
使用IntelliJ IDEA创建简单的Java Web项目完整步骤

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》：本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.
阅读更多...
MySQL不使用子查询的原因及优化案例

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1：查询所有有库存的商品信息案例2：使用EX
阅读更多...
使用Python实现批量访问URL并解析XML响应功能

使用Python实现批量访问URL并解析XML响应功能

《使用Python实现批量访问URL并解析XML响应功能》在现代Web开发和数据抓取中,批量访问URL并解析响应内容是一个常见的需求,本文将详细介绍如何使用Python实现批量访问URL并解析XML响... 目录引言1. 背景与需求2. 工具方法实现2.1 单URL访问与解析代码实现代码说明2.2 示例调用
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2