【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文件内容的信息。 二、功能需求…

保研面试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基础】线程的五大状态

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

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

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

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

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

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> …

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

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

知识库系统:从认识到搭建

在这个信息过载的时代&#xff0c;企业越来越需要一个集中的知识库系统来促进员工协作和解决问题。本文跟着LookLook同学一起来探讨搭建高效知识库系统的所有注意事项和知识库系统的最佳推荐。 | 什么是知识库系统 知识库系统是一种软件或工具&#xff0c;旨在填补组织内的知识…

超越传统AI 新型多智能体系统MESA,探索效率大幅提升

探索多智能体强化学习的协同元探索 —— MESA 算法深度解读在多智能体强化学习&#xff08;MARL&#xff09;的征途中&#xff0c;如何高效探索以发现最优策略一直是研究者们面临的挑战。特别是在稀疏奖励的环境中&#xff0c;这一问题变得更加棘手。《MESA: Cooperative Meta-…

用扫描书籍的功能扫描文档是扫描件吗?

当使用扫描书籍的功能来扫描文档时&#xff0c;产生的结果通常被称为“扫描件”或“扫描图像”。这里的“扫描”一词指的是通过扫描仪或具有扫描功能的设备&#xff08;如一些高端打印机、多功能一体机等&#xff09;将纸质文档转换为数字图像的过程。 扫描件通常是高清晰度的…

关于phpstorm创建类和方法时带描述注释

展示效果&#xff1a; 1、使用phpstorm创建类文件时自带注释及注释编辑 步骤1&#xff1a; 步骤二&#xff1a; 内容&#xff1a; <?php /** * Desc: * author guowei * datetime $DATE $TIME */ #if (${NAMESPACE}) namespace ${NAMESPACE}; #end class ${NAM…

计算机网络 —— 数据链路层(以太网)

计算机网络 —— 数据链路层&#xff08;以太网&#xff09; 什么是以太网以太网传输介质和拓扑结构的发展传输介质的发展&#xff1a;拓扑结构的发展&#xff1a; 10BASE-T 以太网适配器和MAC地址适配器&#xff08;Adapter&#xff09;MAC地址适配器与MAC地址的关系 MAC帧以太…

使用Java进行网络采集:代理IP与参数传递详解

在Java编程语言中&#xff0c;参数传递机制是一个常见的讨论话题。理解这一点对于编写高效且无错误的Java代码至关重要。本文将探讨Java的参数传递机制&#xff0c;解析其究竟是“按引用传递”还是“按值传递”&#xff0c;并结合网络爬虫技术的实例&#xff0c;展示如何在实际…

【机器学习】机器学习与推荐系统在电子商务中的融合应用与性能优化新探索

文章目录 引言机器学习与推荐系统的基本概念机器学习概述监督学习无监督学习强化学习 推荐系统概述基于内容的推荐协同过滤混合推荐 机器学习与推荐系统的融合应用用户行为分析数据预处理特征工程 模型训练与评估模型训练模型评估 个性化推荐基于用户的协同过滤基于商品的协同过…

【Git教程】(二十)外包长历史记录 — 概述及使用要求,执行过程及其实现,替代解决方案 ~

Git教程 外包长历史记录 1️⃣ 概述2️⃣ 使用要求3️⃣ 执行过程及其实现3.1 外包项目历史3.2 链接到当前活动版本库 Git 版本库会随着时间积累越来越大&#xff0c;会影响它的内存管理效率。通常在版本库中只有源 代码文件情况下&#xff0c;这点效率影响可以忽略不计。在现…

WSDM 2023 推荐系统相关论文整理(三)

WSDM 2023的论文录用结果已出&#xff0c;推荐系统相关的论文方向包含序列推荐&#xff0c;点击率估计等领域&#xff0c;涵盖图学习&#xff0c;对比学习&#xff0c;因果推断&#xff0c;知识蒸馏等技术&#xff0c;累计包含近四十篇论文&#xff0c;下文列举了部分论文的标题…

Stable Diffusion【应用篇】【图片修复】:模糊头像照片的高清修复

本文主要是回复一下后台小伙伴留言的问题。经小伙伴本人同意后&#xff0c;允许使用待修复的照片。 我们先看一下待修复的照片。 在向我咨询之前&#xff0c;小伙伴也自己进行了尝试&#xff0c;如果直接使用Stable Diffusion的后期处理功能&#xff0c;出来的图片效果是这样的…

GPEN——使用GANs恢复对人脸图像进行修复

1. 简介 盲目的面部修复&#xff08;Blind Face Restoration, BFR&#xff09;是一个活跃的研究领域&#xff0c;它涉及到在没有任何先验信息的情况下改善低质量&#xff08;Low Quality, LQ&#xff09;图像的质量。这确实是一个具有挑战性的问题&#xff0c;因为模型需要能够…