07-Vue基础之综合案例——小黑记事本

个人名片:
😊作者简介:一名大二在校生
🤡 个人主页:坠入暮云间x
🐼
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

    • 实现功能
    • 小黑记事本代码模板
      • 1.添加功能和列表渲染
      • 2.删除功能
      • 3.统计任务和清空任务
    • 案例总结

今天的学习任务是做一个小黑记事本,一个小案例进行练习。
经过前几周的学习,相信大家对vue基础知识已经有了大概的了解,复习之前学的知识一起做一个综合案例进行巩固练习吧!

如下是今天要完成的案例:
在这里插入图片描述

实现功能

如图所示,我们要做的是一个小黑记事本,完成功能有:

  1. 添加任务
  2. 删除任务
  3. 统计任务
  4. 清空任务

小黑记事本代码模板

将模板代码复制到编辑器中就可以使用了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" /><button class="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo"><div class="view"><span class="index">1.</span> <label>吃饭饭</label><button class="destroy"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> 1 </strong></span><!-- 清空 --><button class="clear-completed">清空任务</button></footer>
</section><!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>   
<script>const app = new Vue({el: '#app',data: {}})</script>
</body>
</html>

千万不要忘记引用vue,不然会报错

1.添加功能和列表渲染

添加功能实现步骤:
1.首先通过v-model进行绑定输入框获取表单元素输入内容
2.在点击添加任务的按钮上使用@click进行新增
3.在数组最前面添加内容 使用unshift
4.先将数据进行列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="todoList" placeholder="请输入任务" class="new-todo" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><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="del(item.id)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> 1 </strong></span><!-- 清空 --><button class="clear-completed" >清空任务</button></footer>
</section><!-- 底部 -->
<script src="../vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList:'',//渲染数据list:[{id:1,name:'跑步一小时'},{id:2,name:'跳舞一小时'},{id:3,name:'跳绳1000个'}]},methods:{//添加功能add(){输入框中内容不为空if(this.todoList.trim()===''){alert('请输入任务名称')return}this.list.unshift({id:+new Date(),name:this.todoList})this.todoList=''}}})</script>
</body>
</html>

1.首先我们要想将数据进行渲染,

2.我在添加任务中写了个警示框要先输入才可以进行添加数据
在这里插入图片描述3.可以随意写一些任务看是否可以进行添加
在这里插入图片描述

2.删除功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="todoList" placeholder="请输入任务" class="new-todo" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><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="del(item.id)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> 1 </strong></span><!-- 清空 --><button class="clear-completed" >清空任务</button></footer>
</section><!-- 底部 -->
<script src="../vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList:'',//渲染数据;使用v-for渲染list:[{id:1,name:'跑步一小时'},{id:2,name:'跳舞一小时'},{id:3,name:'跳绳1000个'}]},methods:{//添加功能add(){if(this.todoList.trim()===''){alert('请输入任务名称')return}this.list.unshift({id:+new Date(),name:this.todoList})this.todoList=''},//删除功能del(id){this.list=this.list.filter(item=>item.id!==id)}}})</script>
</body>
</html>

在这里插入图片描述

3.统计任务和清空任务

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body><!-- 主体区域 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="todoList" placeholder="请输入任务" class="new-todo" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><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="del(item.id)"></button></div></li></ul></section><!-- 统计和清空  使用v-show隐藏空白部分 --><footer class="footer" v-show="list.length>0"><!-- 统计使用length计算list长度--><span class="todo-count">合 计:<strong>{{list.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="clear" >清空任务</button></footer>
</section><!-- 底部 -->
<script src="../vue.js"></script>
<script>const app = new Vue({el: '#app',data: {todoList:'',//渲染数据list:[{id:1,name:'跑步一小时'},{id:2,name:'跳舞一小时'},{id:3,name:'跳绳1000个'}]},methods:{//添加功能add(){if(this.todoList.trim()===''){alert('请输入任务名称')return}this.list.unshift({id:+new Date(),name:this.todoList})this.todoList=''},//删除功能del(id){this.list=this.list.filter(item=>item.id!==id)},clear(){this.list=[]}}})</script>
</body>
</html>

如图所示
1.计算任务总数
在这里插入图片描述
2,清空所有的任务
在这里插入图片描述

案例总结

总结:
1.列表渲染:
v-for :key设置 {{}}插值语法
2.删除功能:
v-on调用传参filter过滤 覆盖修改原数组
3.添加功能;
v-model绑定 unshift修改原数组添加
4.底部统计和清空
数组.length累计长度
unshift覆盖数组清空列表
v-show 控制隐藏

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

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

相关文章

IGBT基本工作原理及IGBT的作用是什么?

IGBT 今天我们一起来了解关于IGBT&#xff08;绝缘栅双极性晶体管&#xff09;芯片。在过去的几十年中&#xff0c;我们生活的每个角落都离不开能源的驱动。然而&#xff0c;传统的功率晶体管却受限于一些方面不足。幸运的是&#xff0c;IGBT芯片的出现彻底改变了这一局面。 …

游戏出海工具都有哪些?

游戏出海是一个复杂的过程&#xff0c;需要运用多种工具来进行市场分析、推广、本地化等工作。以下是一些常用的游戏出海工具&#xff1a; 一、必备工具&#xff1a; 1、游戏平台&#xff1a;要想进行游戏出海运营&#xff0c;游戏平台时必不可少的&#xff0c;选择游戏平台时…

psycopg2 使用dbutils 工具封装

1.什么是dbutils Dbutils是一套工具&#xff0c;可为数据库提供可靠&#xff0c;持久和汇总的连接&#xff0c;该连接可在各种多线程环境中使用。 2.使用代码记录 db_config.py 数据库配置类&#xff1a; # -*- coding: UTF-8 -*- import psycopg2# 数据库信息 DB_TEST_HO…

docker 安装 redis

目录 1、下载镜像文件 2、创建实例并启动 3、使用 redis 镜像执行 redis-cli 命令连接 4、redis持久化操作 5、然后按照第3点&#xff0c;再试一试&#xff0c;看看redis持久化是否配置成功。 6、最后与redis可视化工具测试连接 大家先 su root&#xff0c;这让输入命令就…

GEE/PIE遥感大数据处理与典型案例

随着航空、航天、近地空间等多个遥感平台的不断发展&#xff0c;近年来遥感技术突飞猛进。由此&#xff0c;遥感数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量也大幅增长&#xff0c;使其越来越具有大数据特征。对于相关研究而言&#xff0c;遥感大数据的出现为其提…

23种设计模式攻关

&#x1f44d;一、创建者模式 &#x1f516;1.1、单例模式 单例模式&#xff08;Singleton Pattern&#xff09;&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供全局访问点。 在某些情况下&#xff0c;我们需要确保一个类只能有一个实例&#xff0c;比如数据库连接…

LSTM模型

目录 LSTM模型 LSTM结构图 LSTM的核心思想 细胞状态 遗忘门 输入门 输出门 RNN模型 LRNN LSTM模型 什么是LSTM模型 LSTM (Long Short-Term Memory)也称长短时记忆结构,它是传统RNN的变体,与经典RNN相比能够有效捕捉长序列之间的语义关联,缓解梯度消失或爆炸现象.同时LS…

SpringCloud学习笔记(四)_ZooKeeper注册中心

基于Spring Cloud实现服务的发布与调用。而在18年7月份&#xff0c;Eureka2.0宣布停更了&#xff0c;将不再进行开发&#xff0c;所以对于公司技术选型来说&#xff0c;可能会换用其他方案做注册中心。本章学习便是使用ZooKeeper作为注册中心。 本章使用的zookeeper版本是 3.6…

SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)

一、spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具&#xff0c;包括配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等等。它运行环境简单&#xff0c;可以在开发人员的电脑上跑。另外说明spring cloud是基…

国产精品:讯飞星火最新大模型V2.0

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

评测凯迪仕K70「千里眼」智能锁:不忘安全初心,便捷体验更上一层

能打败凯迪仕的&#xff0c;只有它自己。这是我们在体验过凯迪仕最新旗舰产品K70「千里眼」智能锁之后的感受。作为凯迪仕2023年最新旗舰机型&#xff0c;K70「千里眼」智能锁在配置上可以说是「机皇」般的存在。3K超高清智能锁猫眼、车规级24GHz雷达、大小双屏设计、三方可视对…

百度云BOS云存储的图片如何在访问时,同时进行格式转换、缩放等处理

前言 之前做了一个图片格式转换和压缩的服务&#xff0c;结果太占内存。后来查到在访问图片链接时&#xff0c;支持进行图片压缩和格式转换&#xff0c;本来想着先格式转换、压缩图片再上传到BOS&#xff0c;现在变成了上传后&#xff0c;访问时进行压缩和格式转换。想了想&am…

Jobs Portal求职招聘系统源码v3.5版本

Jobs Portal求职招聘系统 是为求职者和公司发布职位而开发的交互式求职招聘源码。它使求职者能够发布简历、搜索工作、查看个人工作列表。 它将提供各种公司在网站上放置他们的职位空缺资料&#xff0c;并且还可以选择搜索候选人简历。 除此之外&#xff0c;还有一个管理模块供…

基于AVR128单片机世界电子时钟的设计

一、系统方案 上电初始化完成系统初始化&#xff0c;液晶滚动显示北京、莫斯科、东京、伦敦、巴黎、纽约等六个城市的标准时间&#xff0c;显示的内容包括地区名及相应地区的年、月、日、星期、时、分、秒。 使用K1按键控制滚动显示或稳定显示某个地区的时间。 使用K3、K4、K5按…

Q/GDW 1597-2015《国家电网公司应用软件系统通用安全要求》

电力安全测试报告 电力行业检测标准 随着信息技术的快速发展和广泛应用&#xff0c;应用软件系统已成为企业信息化建设中不可或缺的重要组成部分。然而&#xff0c;应用软件系统的安全问题也随之而来&#xff0c;给企业和用户带来了潜在的风险和威胁。为了提高应用软件系统的…

信息与通信工程面试准备——信号与系统|10:23

8月16日 23:21 目录 ​编辑 1. 调制的作用 2. 放大器与振荡器的作用和区别 工作原理 输出信号 应用 反馈方式 设计复杂度 装置性质 3. 信号与系统&#xff1a;三大变换之间的关系&#xff1f; 4. 无码间串扰的条件 5. 冲激函数的作用&#xff1f; 研究的意义&…

Docker容器:docker数据管理、镜像的创建及dockerfile案例

文章目录 一、docker数据管理1.为何需要docker数据管理2.数据管理类型3.数据卷4.数据卷容器5.容器的互联 二.docker镜像的三种创建方法1.基于现有镜像创建1.1 启动镜像1.2 生成新镜像 2.基于本地模板创建2.1 OPENVZ 下载模板2.2 导入容器生成镜像 3.基于dockerfile创建3.1 dock…

Code Lab - 2

pip install torch-scatter -f https://pytorch-geometric.com/whl/torch-1.10.2cu102.html pip install torch-sparse -f https://pytorch-geometric.com/whl/torch-1.10.2cu102.html pip install torch-geometric pip install ogb 1. PyG Datasets PyG有两个类&#xff0c;用…

【Unity每日一记】SceneManager场景资源动态加载

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

elementui 修改日期选择器el-date-picker样式

1. 案例&#xff1a; 2. css /* 最外层颜色 */ .el-popper.is-pure {background: url("/assets/imgList/memuBG.png") no-repeat;border: none;background-size:100% 100%}/* 日期 1.背景透明 */ .el-date-picker{background: transparent; }/* 日期 2.标题、左右图…