当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_46625500/article/details/132451006 2024/11/17 0:55:07

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

文章目录

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

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

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

实现功能

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

添加任务
删除任务
统计任务
清空任务

小黑记事本代码模板

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

<!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 控制隐藏

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

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

编程日记 2023/8/24 2:19:56

vite4+vue3+electron23.3+ts桌面应用bs端开发打包windows、linux、max三个系统的安装包

vite4vue3electron23.3ts桌面应用bs端开发打包windows、linux、max三个系统的安装包主要包依赖 "electron-store": "^8.1.0", //全局数据状态管理，可选择性安装"electron": "23.3.8","electron-builder": &q…...

编程日记 2023/8/24 2:18:51

限制 el-input 输入 emoji

1. 电脑如何输入 emoji 表情 ? 快捷键 win; 或 win. 2. 代码实现 <template><el-input v-model"input" placeholder"请输入内容" input"inputChange"></el-input> </template><script> export default {name: D…...

编程日记 2023/8/24 2:17:45

It appears that you encountered an error while trying to install the “Numbers_Words” package using the specific version 0.18.2 of the PEAR channel. The error message indicates that there was a problem unpacking the “Math_BigInteger-1.0.3” package, whi…...

编程日记 2023/8/24 2:16:43

开启MySQL的binlog日志

在/etc/my.cnf增加如下配置 #binlog相关 log-bin /testdata/mysql/log/bin/mysql-bin expire_logs_days 7 binlog-format ROW binlog_cache_size 4M max_binlog_cache_size 20G binlog_rows_query_log_events 1 binlog_row_image FULL sync_binlog 1 log_bin_trust_fun…...

编程日记 2023/8/24 2:15:41

【支付宝小程序】支付宝小程序自定义组件技术教程

🦖我是Sam9029，一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬&#xff0c…...

编程日记 2023/8/24 2:14:35

CSDN编程题-每日一练（2023-08-23）

CSDN编程题-每日一练（2023-08-23）一、题目名称：圆小艺二、题目名称：连续子数组的最大和三、题目名称：投篮一、题目名称：圆小艺时间限制：1000ms内存限制：256M 题目描述：最近小艺酱渐渐变成了一个圆滑的形状-球！！小艺酱开始变得喜欢上球！小艺酱得到n个同心圆。 …...

编程日记 2023/8/24 2:13:34

解决：Appium Inspector刷新页面一直加载转圈

目录问题：Appium Inspector刷新页面一直加载转圈解决办法： 1.进入设置页面-电池-后台耗电管理 2.找到下面3个应用，修改为允许后台高耗电问题：Appium Inspector刷新页面一直加载转圈 1、手机进行操作后，Appium I…...

编程日记 2023/8/24 2:12:33

Apache Doris 入门教程34：Join 优化

Bucket Shuffle Join Bucket Shuffle Join 是在 Doris 0.14 版本中正式加入的新功能。旨在为某些 Join 查询提供本地性优化，来减少数据在节点间的传输耗时，来加速查询。它的设计、实现和效果可以参阅上面的图片展示了Bucket Shuffle Join的工作原理…...

编程日记 2023/8/24 2:11:31

【神州数码】BGP路由器案例

SwitchB、SwitchC和SwitchD位于AS200中，SwitchA位于AS100中。SwitchA和SwitchB共享一个相同的网络段11.0.0.0。而SwitchB和SwitchD彼此物理上不相邻。则SwitchA的配置如下： SwitchA(config)#router bgp 100SwitchA(config-router-bgp)#neighbor 11.1.1…...

编程日记 2023/8/24 2:10:28

gin框架实现大文件下载

在gin框架中实现大文件下载主要分为两个步骤： 将文件分块读取由于大文件一次性读取会占用大量内存，容易导致内存溢出等问题，需要将文件分块读取，逐一发送给客户端。在gin框架中，可以使用context.File方法向客户端…...

编程日记 2023/8/24 2:09:26

数据可视化-canvas-svg-Echarts

数据可视化技术栈 canvas <canvas width"300" height"300"></canvas>当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。切记不能通过样式去设置画布的宽度与高度宽高必须通过属性设置，…...

编程日记 2023/8/24 2:08:24

深信服 SG上网优化管理系统 catjs.php 任意文件读取漏洞[2023-HW]

深信服 SG上网优化管理系统 catjs.php 任意文件读取漏洞一、漏洞描述二、漏洞影响三、网络测绘四、漏洞复现小龙POC检测: 五、修复建议免责声明：请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间…...

编程日记 2023/8/24 2:07:21

java反序列化泛型中json对象

使用 jackson的objectMapper 来实现 import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.DeserializationFeature; import com.fasterxml.jackson.databind.ObjectMa…...

编程日记 2023/8/24 2:06:19

Docker Compose一键管理容器

可以一键批量管理docker的容器。将所有需要创建的容器定义在compose配置文件中，通过一个命令一键可以创建并运行这些容器，而不需要一个一个启动。可以批量启动停止服务。安装 #安装Docker-Compose并安装到/usr/local/bin/docker-compose curl -L &quo…...

编程日记 2023/8/24 2:05:18

API接口文档利器：Swagger 和接口调试利器：Postman

2.接口相关工具 2.1API接口文档利器：Swagger 2.1.1Swagger介绍 Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务 (https://swagger.io/)。它的主要作用是： 使得前后端分离开发更加方便&#xff0…...

编程日记 2023/8/24 2:04:16

Redis手动实现分布式锁-Demo

1、pom文件依赖  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 2、具体实现 package com.xch;import org.spring…...

编程日记 2023/8/24 2:03:15

BBS项目day04 文章详情页、点赞点菜、评论功能(根评论和子评论)、评论分页之刷新评论页面

一、路由 from django.contrib import admin from django.urls import path, re_path from app01 import views from django.views.static import serve from django.conf import settingsurlpatterns [path(admin/, admin.site.urls),# 注册path(register/, views.register)…...

编程日记 2023/8/24 2:02:14

【带着学Pytorch】1、pytorch的安装与入门

一、介绍与安装 1.1. pytorch优点：上手简单：掌握语法和深度学习的概念，尤其是Numpy的使用与python的list切片有共同性。代码灵活：基本调用封装好的模块，动态图使编写更加灵活资源多：硬件，软件，文档资料都很多。容易调试：动态运行在调试中可以观察数据的变化是否符…...

编程日记 2023/8/24 2:01:13

smartbi token回调获取登录凭证漏洞

2023年7月28日Smartbi官方修复了一处权限绕过漏洞。未经授权的攻击者可利用该漏洞，获取管理员token，完全接管管理员权限。于是研究了下相关补丁并进行分析。 0x01分析结果依据补丁分析，得到如下漏洞复现步骤第一步，设置Engi…...

编程日记 2023/8/24 2:00:12

SQL注入之堆叠查询

文章目录堆叠查询是什么？堆叠查询修改所有用户密码堆叠查询删除数据库恢复数据库堆叠查询是什么？ 在SQL中，分号;是用来表示一条sql语句的结束。试想一下我们在; 结束一个sql语句后继续构造下一条语句，会不会一起执行&#xff1f…...

编程日记 2023/8/24 1:59:11

java-JVM 类加载机制

JVM 类加载机制 JVM 类加载机制分为五个部分：加载，验证，准备，解析，初始化，下面我们就分别来看一下这五个过程。 1.1. 加载加载是类加载过程中的一个阶段，这个阶段会在内存中生成一个代表这…...

编程日记 2023/8/24 1:58:09

前端面试：【网络协议与性能优化】提升Web应用性能的策略

嗨，亲爱的Web开发者！构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略，包括资源加载、懒加载和CDN等，以帮助你提升Web应用的性能。 1. 性能优化策略： 压缩资源： 使用Gzip或Brotli等压缩…...

编程日记 2023/8/24 1:57:07

前端面试：【React】构建现代Web的利器

嘿，亲爱的React探险家！在前端开发的旅程中，有一个神奇的库，那就是React。React是一个用于构建现代Web应用的强大工具，它提供了组件化开发、状态管理、生命周期管理和虚拟DOM等特性，让你的应用开发变得更加高…...

编程日记 2023/8/24 1:56:05

使用mysql:5.6和 owncloud 镜像，构建一个个人网盘。

1、使用mysql:5.6和 owncloud 镜像，构建一个个人网盘。拉取mysql:5.6和owncloud的镜像和生成实例 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull ownclound [rootlocalhost ~]# docker run -d --name mydb1 --env MYSQL_ROOT_PASSWO…...

编程日记 2023/8/24 1:55:04

k8s发布应用

前言首先以SpringBoot应用为例介绍一下k8s的发布步骤。 1.从代码仓库下载代码，比如GitLab； 2.接着是进行打包，比如使用Maven； 3.编写Dockerfile文件，把步骤2产生的包制作成镜像； 4.上传步骤3的镜像到…...

编程日记 2023/8/24 1:54:03

微信小程序教学系列（4）

微信小程序教学系列第四章：小程序优化与调试 1. 性能优化技巧在开发微信小程序时，我们可以采取一些性能优化技巧，以提升小程序的性能表现和用户体验。以下是一些常用的性能优化技巧： 减少网络请求：尽量合并网络请…...

编程日记 2023/8/24 1:53:02

Netty核心源码解析(三)--NioEventLoop

NioEventLoop介绍 NioEventLoop继承SingleThreadEventLoop,核心是一个单例线程池,可以理解为单线程,这也是Netty解决线程并发问题的最根本思路--同一个channel连接上的IO事件只由一个线程来处理,NioEventLoop中的单例线程池轮询事件队列,有新的IO事件或者用户提交的task时便执…...

编程日记 2023/8/24 1:51:59

Vue2学习笔记のVue核心

目录 Vue核心初识VueVue模板语法数据绑定el与data的两种写法MVVM模型数据代理Object.defineProperty方法何为数据代理Vue中的数据代理事件处理事件的基本使用事件修饰符键盘事件计算属性姓名案例_插值语法实现姓名案例_methods实现姓名案例_计算属性实现姓名案例_计算属性简写…...

编程日记 2023/8/24 1:50:56

把matlab的m文件打包成单独的可执行文件

安装Matlab Compiler Adds-on在app里找到Application Compiler 选择要打包的文件matlab单独的运行程序的话需要把依赖的库做成runtime. 这里有两个选项. 上面那个是需要对方在联网的情况下安装, 安装包较小.下面那个是直接把runtime打包成安装程序, 大概由你的程序依赖的库的多…...

编程日记 2023/8/24 1:49:55

一个网站如何做推广/seo优化入门教程

从MySQL5.6开始，mysqlbinlog支持将远程服务器上的binlog实时复制到本地服务器上。mysqlbinlog的实时二进制复制功能并非简单的将远程服务器的日志复制过来，它是通过MySQL 5.6公布的Replication API实时获取二进制事件。本质上，就相当于MySQL的…...

编程日记 2024/11/16 21:32:50