【Vue】小黑记事本

文章目录

  • 一、需求说明
  • 二、思路分析
  • 三、代码实现

一、需求说明

  • 拆分基础组件
  • 渲染待办任务
  • 添加任务
  • 删除任务
  • 底部合计 和 清空功能
  • 持久化存储

二、思路分析

拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容:头部(TodoHeader)、列表(TodoMain)、底部(TodoFooter)

68232559841

列表渲染

思路分析:

  1. 提供数据:提供在公共的父组件 App.vue
  2. 通过父传子,将数据传递给TodoMain
  3. 利用v-for进行渲染

添加功能

思路分析:

  1. 收集表单数据 v-model
  2. 监听时间 (回车+点击 都要进行添加)
  3. 子传父,将任务名称传递给父组件App.vue
  4. 父组件接受到数据后 进行添加 unshift(自己的数据自己负责)

综合案例-删除功能

思路分析:

  1. 监听事件(监听删除的点击)携带id
  2. 子传父,将删除的id传递给父组件App.vue
  3. 进行删除 filter (自己的数据自己负责)

底部功能及持久化存储

思路分析:

  1. 底部合计:父组件传递list到底部组件 —>展示合计
  2. 清空功能:监听事件 —> 子组件通知父组件 —>父组件清空
  3. 持久化存储:watch监听数据变化,持久化到本地

三、代码实现

App.vue

<template><!-- 主体区域 --><section id="app"><TodoHeader @add="handleAdd"></TodoHeader><TodoMain :list="list" @del="handelDel"></TodoMain><TodoFooter :list="list" @clear="clear"></TodoFooter></section>
</template><script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";// 渲染功能:
// 1.提供数据: 提供在公共的父组件 App.vue(因为三个子组件都需要使用)
// 2.通过父传子,将数据传递给TodoMain
// 3.利用 v-for渲染// 添加功能:
// 1.手机表单数据  v-model
// 2.监听事件(回车+点击都要添加)
// 3.子传父,讲任务名称传递给父组件 App.vue
// 4.进行添加 unshift(自己的数据自己负责)
// 5.清空文本框输入的内容
// 6.对输入的空数据 进行判断// 删除功能
// 1.监听事件(监听删除的点击) 携带id
// 2.子传父,将删除的id传递给父组件的App.vue
// 3.进行删除filter(自己的数据 自己负责)// 底部合计:父传子  传list 渲染
// 清空功能:子传父  通知父组件 → 父组件进行更新
// 持久化存储:watch深度监视list的变化 -> 往本地存储 ->进入页面优先读取本地数据
export default {data() {return {list: JSON.parse(localStorage.getItem("list")) || [{ id: 1, name: "打篮球" },{ id: 2, name: "看电影" },{ id: 3, name: "逛街" },],};},components: {TodoHeader,TodoMain,TodoFooter,},watch: {list: {deep: true,handler(newVal) {localStorage.setItem("list", JSON.stringify(newVal));},},},methods: {handleAdd(todoName) {// console.log(todoName)this.list.unshift({id: +new Date(),name: todoName,});},handelDel(id) {// console.log(id);this.list = this.list.filter((item) => item.id !== id);},clear() {this.list = [];},},
};
</script><style>
</style>

TODOHead.vue

<template><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todoName" @keyup.enter="handleAdd"/><button class="add" @click="handleAdd">添加任务</button></header>
</template><script>
export default {data(){return {todoName:''}},methods:{handleAdd(){// console.log(this.todoName)this.$emit('add',this.todoName)this.todoName = ''}}
}
</script><style></style>

TODOMain.vue

<template><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span><label>{{ item.name }}</label><button class="destroy" @click="handleDel(item.id)"></button></div></li></ul></section>
</template><script>
export default {props: {list: {type: Array,},},methods: {handleDel(id) {this.$emit('del', id)},},
}
</script><style>
</style>

TODOFooter.vue

<template><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> {{ list.length }} </strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任务</button></footer>
</template><script>
export default {props: {list: {type: Array,},},methods: {clear() {// 如果不需要传参的话,第二个参数可以直接不写this.$emit("clear");},},
};
</script><style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于semantic_kernel的ChatMD系统

问答系统需求文档 一、项目概述 本项目旨在开发一个能够上传 MD 文件&#xff0c;并基于 MD内容进行问答互动的系统。用户可以上传 MD文件&#xff0c;系统将解析 MD内容&#xff0c;并允许用户通过对话框进行问答互动&#xff0c;获取有关 MD文件内容的信息。 二、功能需求…

FreeRTOS学习笔记-基于stm32(8)信号量总结(二值信号量、计数型信号量、互斥信号量、优先级翻转、优先级继承)

一、什么是信号量 信号量是一种队列&#xff0c;用于任务间同步和资源管理的机制&#xff0c;主要用来传递状态。就像是一种特殊的“旗子”或“钥匙”&#xff0c;用来在不同的任务之间进行沟通和协调&#xff0c;确保它们能够正确地配合工作&#xff0c;不会互相干扰。 二、二…

保研面试408复习 8——计算机网络(浏览器http)、离散数学(平面图)、操作系统、数据结构

文章目录 一、计算机网络1、从在浏览器输入网址到页面显示的过程1. 输入网址2. DNS 解析3. 建立TCP连接4. 发送HTTP请求5. 服务器处理请求并响应6. 浏览器处理响应7. 页面渲染 二、离散数学一、平面图1、平面图性质2、Kuratowski定理 三、操作系统四、数据结构 一、计算机网络 …

IDCF五周年专场—【研发效能·创享大会】圆满落幕!

2024 年5 月25 日&#xff0c;【研发效能创享大会】—IDCF五周年专场在北京希尔顿欢朋酒店&#xff08;大红门&#xff09;成功举办&#xff01;本次大会旨在为社区成员提供一个学习与交流的平台&#xff0c;分享技术经验&#xff0c;交流行业见解&#xff0c;促进技术合作与创…

Java模板模式及代码

意图 在父类中定义了算法的骨架&#xff0c;而将一些步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构&#xff0c;就可以重定义该算法的某些特定步骤&#xff0c;这种类型的设计模式属于行为型模式。 主要解决的问题 解决在多个子类中重复实现相同的方法的问…

北京海淀区永丰产业基地地块出让,海开控股79.17亿元竞得

据悉&#xff0c;位于北京海淀区西北旺镇的永丰产业基地地块正式出让&#xff0c;引起了业界的广泛关注。经过激烈的竞争&#xff0c;最终由海开控股以79.17亿元的价格成功竞得该地块&#xff0c;成交楼面价达到35588元/平方米&#xff0c;溢价率为1.5%。此次出让的地块不仅吸引…

【Java基础】线程的五大状态

新建状态 使用 new 关键字和 Thread 类或其子类建立一个线程对象后&#xff0c;该线程对象就处于新建状态。它保持这个状态直到程序 start() 这个线程。 就绪状态 当线程对象调用了start()方法之后&#xff0c;该线程就进入就绪状态。就绪状态的线程处于就绪队列中&#xff…

景深技术在AI绘画中的魔法:为数字艺术注入新维度

引言&#xff1a; 在人工智能&#xff08;AI&#xff09;的浪潮中&#xff0c;绘画艺术领域迎来了革命性的变革。AI绘画不仅改变了创作过程&#xff0c;还为艺术家和设计师提供了前所未有的工具。其中&#xff0c;景深技术作为一种重要的视觉处理手段&#xff0c;在AI绘画中的应…

error:nullptr was not declared in this scope

nullptr是c11的内容,在Qt5.5.0中使用时需要在.pro添加 QMAKE_CXXFLAGS -stdc11

告别繁琐,Xinstall一键解决App代理结算难题!

在移动互联网的浪潮中&#xff0c;App的推广和运营成为了众多企业和开发者关注的焦点。然而&#xff0c;随着App市场的日益竞争&#xff0c;代理结算的复杂性和繁琐性成为了许多推广者头疼的问题。为了解决这个问题&#xff0c;Xinstall凭借其专业的技术和丰富的服务经验&#…

在ros中获取话题的发布节点名称(C++)

文章目录 概要CMakeLists.txt主要代码效果概要 在ROS中,直接从订阅回调函数中获取发布该话题的节点信息并不直接支持。ROS设计的发布-订阅机制并没有直接提供在回调函数中获取发布节点的接口。发布节点的信息主要通过rosgraph等工具来获取。 不过,可以通过以下几种方式间接…

Modebus通信协议 温控器示例

目录 1 指令解释 2 获取动态的CRC 3 crc在线验证 4 16进制正负温度互转 4.2 16进制转温度 4.2 温度转16进制 5 完整工具类 最近安卓工作接了很多硬件&#xff0c;其他的都是发个固定指令&#xff0c;比较有代表性就是温控器和打印机自定义内容所以这个记录接入示例&…

为什么没有输出九九乘法表?

下面的程序本来想输出九九乘法表到屏幕上&#xff0c;为什么没有输出呢&#xff1f;怎样修改&#xff1f; <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>我的HTML练习</title> …

从零开始教你RuoYi-Cloud项目阿里云部署

这里写自定义目录标题 准备需要的文件文件下载运程工具(按需下载)文件上传一、安装Docker环境二、应用部署2.1、Nacos2.2、Nginx2.3、Mysql2.4、Redis2.5、JDK2.6、Docker Compose三、项目部署四、ERROR无法访问云服务器上部署的Docker容器端口冲突或端口占用Linux修改jar包中…

qemu虚拟机安装麒麟v10 arm版系统

截止目前&#xff0c;安装v10 sp1版本系统&#xff0c;&#xff0c;v10 sp3系统无法安装。 1.// 创建虚拟机 最好大于65G qemu-img create -f qcow2 D:\Kylin\Kylindisk.qcow2 70G2.// 使用qemu-system-aarch64.exe命令安装麒麟操作系统&#xff1a; qemu-system-aarch64.exe …

go语言进阶 包

package 包&#xff1a; go 语言使用包&#xff08;package&#xff09;这种语法元素来组织管理源码&#xff0c;所有语法可见性均定义在 package 这个级别 与 Java python 相似 1. main 包&#xff1a; go 语言的程序入口 main() 函数所在的包 (package) 叫做 main包 , mian…

linux内核下rapidio(TSI721)相关笔记汇总

1 驱动的安装 和 主要功能(doorbell, DMA, rionet)的简单测试 linux5.4 下使用rapidio(tsi721)的笔记记录_kernel-rapidio-CSDN博客 2 机理分析 linux内核下&#xff0c;rapidio网络系统建立的过程(枚举 和 发现)_linux rapidio-CSDN博客 linux内核下&#xff0c;(rapidio)T…

新火种AI|倒反天罡!美国名校斯坦福AI团队抄袭中国大模型

作者&#xff1a;一号 编辑&#xff1a;美美 中国大模型被抄袭&#xff0c;怎么不算是某种层面上的国际认可呢&#xff1f; 5月29日&#xff0c;斯坦福大学的一个AI研究团队发布了一个名为「Llama3V」的模型&#xff0c;号称只要 500 美元就能训练出一个 SOTA 多模态模型&am…

Python库之pandas的简介、安装、使用方法详细攻略

Python库之pandas的简介、安装、使用方法详细攻略 简介 pandas 是 Python 中用于数据分析和操作的一个强大库&#xff0c;它提供了快速、灵活和表达力强的数据结构&#xff0c;旨在使数据清洗和分析工作变得更加简单易行。pandas 适用于处理表格数据&#xff08;例如CSV文件、…

元宇宙概念及关键技术

“元宇宙”这个概念最早出自上世纪90年代出版的一部美国人写的科幻小说《雪崩》&#xff08;Snow Crash&#xff09;&#xff0c;作家Neal Stephenson这样定义元宇宙&#xff1a;“元宇宙是指一个脱胎于现实世界&#xff0c;又与现实世界平行、相互影响&#xff0c;并且始终在线…