Vue53-Todo-list案例

一、需求:

二、组件的划分:按照功能划分

组件起名,不要和html内置元素重名!

Vue鼓励组件名用多个单词

三、组件化编码流程 

3-1、实现静态组件 

将各个组件的基本框架写好,并在App.vue文件中进行引入和注册。

将已有的html元素和css样式,都复制到App.vue文件中,并一个个拆分到对应的组件。

3-2、展示动态数据 

创建id的函数: 

3-3、组件之间的传值

App.vue给谁传都能传。 

解决:两个兄弟之间数据的传递:

 

 

注意:

 

实现勾选功能

数据在哪里,操作数据的方法就在哪里。

App.vue

 

若是input类型是checkbox,并且v-model绑定的是boolean值,则这个 boolean值能决定checkbox是否勾选。

props得到的内容是只读的!但是此写法不报错,因为此修改vue检测不到。

虽然不报错,但是不建议这么写。

3-4、删除列表值

App.vue中写删除函数

 

传值给MyList组件

MyList组件接收删除函数,并传给MyItem组件 

MyItem组件接收删除函数,并调用函数,传入要删除数据的id 

 

3-5、底部统计

App.vue将todos数组传给MyFooter组件: 

MyFooter组件: 

高级写法: 

ES6,数组中的reduce方法

Array.prototype.reduce() 是一个强大的数组方法,它接收一个回调函数作为累加器

arr.reduce(callbackFunction(accumulator, currentValue), initialValue)

数组有几个字符,callbackFunction就调几次!

  • accumulator(累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue;
  • currentValue(数组中正在处理的当前元素。)
  • initialValue(可选):作为第一次调用 callback 函数时的第一个参数的值。

3-6、底部交互

 

使用另一种写法:

删除所有已勾选的功能

数组的过滤:filter方法,不影响原数组。

 

四、小结

 

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

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

相关文章

[Day 8] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

智能合約與去中心化應用 智能合約(Smart Contracts)是一種基於區塊鏈技術的程式碼,旨在自動執行、驗證或執行合約的內容或執行條款。透過智能合約,合約中的各方可以在無需第三方信任的情況下進行交易,實現自動化、透明…

AI数据分析:集中度分析和离散度分析

在deepseek中输入提示词: 你是一个Python编程专家,要完成一个Python脚本编写的任务,具体步骤如下: 读取Excel表格:"F:\AI自媒体内容\AI行业数据分析\toolify月榜\toolify2023年-2024年月排行榜汇总数据.xlsx&qu…

UniVue第一个版本发布说明

今天终于发布第一个版本了,爆肝了这么多天,对之前的代码优化重构,今天终于做完了,第一个版本的核心基础功能已经全部完成! github仓库 稳定版本仓库:https://github.com/Avalon712/UniVue 开发版本仓库&…

196. 删除重复的电子邮箱

196. 删除重复的电子邮箱 题目链接:196. 删除重复的电子邮箱 代码如下: # Write your MySQL query statement below delete from Person as p where p.id not in(select e.id from (select min(id) as idfrom Person group by email ) as e )

(二十一)Java 之多态

目录 一. 前言 二. 多态 2.1. 实例入手 2.2. 虚方法 三. 多态的实现方式 四. 课后习题 一. 前言 多态是同一个行为具有多个不同表现形式或形态的能力。 多态性是对象多种表现形式的体现。 比如我们说“宠物”这个对象,它就有很多不同的表达或实现,…

web前端五行属性:深入探索与实战解析

web前端五行属性:深入探索与实战解析 在Web前端开发中,五行属性这一概念或许听起来有些陌生。然而,如果我们将其与前端开发的核心理念相结合,就能发现其中蕴含的深刻内涵。本文将从四个方面、五个方面、六个方面和七个方面&#…

QT图片转PNG项目实战(含源码)

一、需求说明 最近在换工作,都需要将所有的图片,例如身份证、毕业证等信息都需要合并到一个pdf中。找了软件发现几乎都需要收费,干脆就自己写一个好了。 功能说明如下: 支持鼠标拖动加载图片,可以从桌面将图片类型的文件拖到软件中,一次最多添加150张。支持点击菜单中的…

树莓派4B刷入KODI作为机顶盒

LibreELEC Raspberry - LibreELEC Download - OSMC 使用LibreELEC USB-SD Creator进行系统烧写, LibreELEC USB-SD Creator下载地址 因为Kodi语言包是以插件的形式存在,不是集成到安装包里,有时候网络原因不能连接到Kodi的服务器&#xff…

爬虫初学篇

初次学习爬虫,知识笔记小想 目录🌟 一、🍉基础知识二、🍉http协议:三、🍉解析网页(1) xpath的用法:(2) bs4解析器的解释:(3) python字符编码的错误:(4) 正则表达式&#…

如何在单个VPS上使用nginx、forever和crontab托管多个Node.js应用

遵循本教程的要求 您需要安装 nginx 和 Node.js,并且在 DigitalOcean 上已经有关于这些主题的教程: 如何安装 nginx 和 如何安装 Node.js。 此外,您应该已经拥有一个域名,以便将正在运行的 Node.js 服务映射到域名,而…

手把手教学!新一代 Kaldi: TTS Runtime ASR 实时本地语音识别 语音合成来啦

简介 本文向大家介绍如何在新一代 Kaldi的部署框架 **sherpa-onnx**中使用 TTS。 注:sherpa-onnx 提供的是一个TTS runtime, 即部署环境。它并不支持模型训练。 本文使用的测试模型,都是来源于网上开源的 VITS 预训练模型。 我们提供了 ONNX 导出的支持。如果你也有 VITS 预…

你应该知道的口语连读技巧

[共24课]连读弱读-发音课程已上线 第一课 辅音和元音的连读 linking consonant to vowel 辅音和元音连读 第二课 h和th的删除不读 h-删除|deletion|elision|drop he/her/have/here/him... them-->/əm/ 第三课 t的删去不读(1) t-deletion|elision(1) drop t after…

GEO ISP图像调试-PFC(蓝紫边校正)

目录 1、简单介绍 2、调试策略 3、输出结果 1、简单介绍 GEO中中调整图像蓝紫边可分为两步,第一步:调整蓝紫边检测区域,第二步:设置去蓝紫边强度。 2、调试策略 图1 该图像蓝紫边较严重 主要原因是由于蓝紫边检测不准导致的&…

Java7之后的Java版本主要升级内容

自Java 7之后,Java的各个版本引入了许多重要的特性和改进。以下是Java 8到Java 17每个版本的主要升级内容: Java 8 (2014) Java 8 是一个具有重大里程碑意义的版本,包含了许多重要的特性和改进: Lambda 表达式:引入…

从零制作一个docker的镜像

近期docker的镜像仓库不好用了,很多国内的源也无法使用了,所有今天给大家分享一下怎么从零制作一个CentOS镜像。 准备CentOS7最小环境 mkdir /centos7.9-root# 在该目录准备centos的最小环境 sudo yum --installroot/centos7.9-root --releasever7 ins…

【面试题】MySQL常见面试题总结

备战实习,会定期给大家整理常考的面试题,大家一起加油! 🎯 系列文章目录 【面试题】面试题分享之JVM篇【面试题】面试题分享之Java并发篇【面试题】面试题分享之Java集合篇(三) 注意:文章若有错…

杂谈-C和C++有什么不同

C和C是两种流行的编程语言,它们在很多方面都有相似之处,但也有很多关键的区别。以下是对C和C之间差异的详细比较,旨在清晰地解释两者之间的不同点。 一、设计思想和语法规范 设计思想: C语言:C语言是一种面向过程的语…

将 Python3 程序打包成 APK 并运行在 ARM 的 Android 系统中

作为一个开发者,我们经常需要将我们的 Python 程序部署到移动端,以便更好地服务于用户。然而,直接在 Android 系统上运行 Python 程序却存在一定的挑战,因为 Android 系统默认不支持 Python。这篇文章将介绍如何将 Python3 程序打…

LeetCode435无重叠区间

题目描述 给定一个区间的集合 intervals ,其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量,使剩余区间互不重叠 。 解析 由于要删除尽可能少的区间 ,因此区间跨度大的一定是要先删除的,这样就有两种贪心思想了…

API接口:解锁社交电商的创新潜力

摘要 在数字化营销的浪潮中,某音作为一个集社交与电商于一体的平台,其API接口为品牌和商家提供了前所未有的机遇。本文深入探讨了某音API接口如何助力社交电商,实现个性化营销和增强用户体验。 关键词 某音、​​API接口​​、社交电商、个…