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

news2025/1/13 2:42:18

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间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.coloradmin.cn/o/917358.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

高斯分布（正态分布）详解

高斯分布（正态分布）详解

高斯分布 一、概念二、详解和例子说明三、判断数据是否服从高斯分布四、高斯分布实际应用 一、概念 定义&#xff1a;随机变量X服从一个数学期望 μ \mu μ、方差为 σ \sigma σ的高斯分布&#xff0c;又名正态分布。当μ 0,σ 1时的正态分布是标准正态分布。 高斯分布概率…
阅读更多...
使用Matlab coder 生成函数‘referencePathFrenet’ 对应C/C++代码含有超大数组

使用Matlab coder 生成函数‘referencePathFrenet’ 对应C/C++代码含有超大数组

嵌入式需要使用C/C集成&#xff0c;开发使用Matlab&#xff0c;然后使用 coder 生成函数‘referencePathFrenet’ 生成了对应的C/C代码&#xff0c;然而C代码含有大量超大数组导致嵌入式无法集成&#xff1a; 分析Matlab 源代码发现是dclothoid.m 里面路径插值的时候默认使用了…
阅读更多...
制作一个专属于安防监控业的小程序商城

制作一个专属于安防监控业的小程序商城

随着科技的发展和人们生活水平的提高&#xff0c;安防监控设备在我们的日常生活中起到了越来越重要的作用。因此&#xff0c;建立一个安防监控设备商城小程序就变得尤为重要。下面将介绍如何建立这样一个小程序。 第一步&#xff0c;登录乔拓云平台后台&#xff0c;进入商城管理…
阅读更多...
奇怪的没有文件或目录（Deepin+富瀚微）

奇怪的没有文件或目录（Deepin+富瀚微）

最近在Linux下进行一些开发&#xff0c;遇到了问题。从UOS折腾到Deepin&#xff0c;最终在参考如下链接完成&#xff0c;非常感谢&#xff0c;记录下来&#xff0c;希望对后面的学习者有帮助。作者使用的可能是ubuntu&#xff0c;我使用的是deepin。我安装的是富瀚微的工具链。…
阅读更多...
【Linux】【驱动】第一个相对完整的驱动编写

【Linux】【驱动】第一个相对完整的驱动编写

【Linux】【驱动】第一个相对完整的驱动编写 续1.驱动部分的代码2 app 代码3 操作相关的代码 续 这个章节会讲述去直接控制一个GPIO&#xff0c;高低电平。 因为linux不允许直接去操作寄存器&#xff0c;所以在操作寄存器的时候就需要使用到函数&#xff1a;ioremap 和iounma…
阅读更多...
RedisTemplate和StringRedisTemplate的区别、对比

RedisTemplate和StringRedisTemplate的区别、对比

学习 Jedis、RedisTemplate、StringRedisTemplate之间的比较 博客中提到&#xff1a;一. Jedis是Redis官方推荐的面向Java的操作Redis的客户端。 二. RedisTemplate,StringRedisTemplate是SpringDataRedis中对JedisApi的高度封装。SpringDataRedis相对于Jedis来说可以方便地更…
阅读更多...
Qt+C++动力监控动画仿真SCADA上位机

Qt+C++动力监控动画仿真SCADA上位机

程序示例精选 QtC动力监控动画仿真SCADA上位机 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC动力监控动画仿真SCADA上位机>>编写代码&#xff0c;代码整洁&#xff0c;规则…
阅读更多...
心理与神经生物工程交叉学科国际论坛—暨第17届复合医学工程国际会议（CME2023）

心理与神经生物工程交叉学科国际论坛—暨第17届复合医学工程国际会议（CME2023）

心理与神经生物工程交叉学科国际论坛—暨第17届复合医学工程国际会议&#xff08;CME2023&#xff09; International Forum on the Intersection of Psychology and Neuromedical Engineering -17th International Conference on Complex Medical Engineering (CME2023) 心…
阅读更多...
字节跳动 从需求到上线全流程 软件工程流程 需求评估 MVP

字节跳动 从需求到上线全流程 软件工程流程 需求评估 MVP

走进后端开发流程 整个课程会带大家先从理论出发&#xff0c;思考为什么有流程 大家以后工作的团队可能不一样&#xff0c;那么不同的团队也会有不同的流程&#xff0c;这背后的逻辑是什么 然后会带大家按照走一遍从需求到上线的全流程&#xff0c;告诉大家在流程的每个阶段&am…
阅读更多...
功率放大器在电子实验中的作用是什么

功率放大器在电子实验中的作用是什么

功率放大器在电子实验中扮演着重要的角色&#xff0c;它具有多种作用和应用。在本文中&#xff0c;我们将详细介绍功率放大器在电子实验中的作用。 信号放大&#xff1a;功率放大器能够将输入信号的功率放大到更高的水平。在电子实验中&#xff0c;信号放大是非常常见的需求。通…
阅读更多...
冒险岛 vcruntime140.dll 丢失问题的多种方法，几种解决方法都有效

冒险岛 vcruntime140.dll 丢失问题的多种方法，几种解决方法都有效

当您尝试启动冒险岛游戏时&#xff0c;可能会遇到一个名为“vcruntime140.dll 丢失”的错误提示。vcruntime140.dll 是冒险岛游戏所需的一个重要系统文件&#xff0c;如果系统无法找到或加载该文件&#xff0c;您将无法正常启动游戏。在本文中&#xff0c;我们将详细介绍解决冒…
阅读更多...
用友T3T6登录报错检测公共组件softcop.dll时未能通过,公共组件可能被破坏。

用友T3T6登录报错检测公共组件softcop.dll时未能通过,公共组件可能被破坏。

导致原因&#xff0c;windows 10操作系统&#xff0c;预制验证证书更新故障。 操作系统原因导致的。大量客户报错。 临时解决方法&#xff1a;把电脑系统日期改为 2023-08-01日以前。 根治解决方法&#xff0c;重置windows 预制证书&#xff0c;刷新签名证书。
阅读更多...
【C++/C 实现球球大作战】

【C++/C 实现球球大作战】

目录 1.引言2.游戏设计&#xff1a;概述游戏的玩法和操作方式。3.游戏实现&#xff08;1&#xff09;函数 GameInit() 初始化游戏的函数。&#xff08;2&#xff09;函数 GameDraw() 用于绘制游戏场景的函数。&#xff08;3&#xff09;函数 keyControl(int speed) 负责处理键盘…
阅读更多...
新能源汽车技术的最新进展和未来趋势

新能源汽车技术的最新进展和未来趋势

文章目录 电池技术的进步智能驾驶与自动驾驶技术充电基础设施建设新能源汽车共享和智能交通未来趋势展望结论 &#x1f389;欢迎来到AIGC人工智能专栏~探索新能源汽车技术的最新进展和未来趋势 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客…
阅读更多...
请注意：名字里千万不要有凶数

请注意：名字里千万不要有凶数

人与人之间相处&#xff0c;最重要的就是信任二字。 而被人相信和被人欣赏一样&#xff0c;都是值得我们喜乐和感动的事情。 曾经&#xff0c;峰民在常德工作室接待一位预约福主&#xff0c; 这位福主一见面就给了峰民一个感恩红包&#xff0c;峰民非常感动。 这位福主是非常的…
阅读更多...
RISC-V公测平台发布 · 在SG2042上配置Jupiter+Octave科学计算环境

RISC-V公测平台发布 · 在SG2042上配置Jupiter+Octave科学计算环境

简介 JupyterHub是一个开源的共享计算平台&#xff0c;它为每个用户管理一个单独的 Jupyter 环境&#xff0c; 可以用于学生班级、企业数据科学小组或科学研究小组。它是一个多用户中心&#xff0c;可以生成、管理和代理多个单用户Jupyter笔记本服务器的实例。 GNU Octave是一…
阅读更多...
分布式下的session共享问题

分布式下的session共享问题

首页我们确定在分布式的情况下session是不能共享的。 1.不同的服务&#xff0c;session不能共享&#xff0c;也就是微服务的情况下 2.同一服务在分布式情况&#xff0c;session同样不能共享&#xff0c;也会是分布式情况 分布式下session共享问题解决方案(域名相同) 1.session复…
阅读更多...
基于 Android 剧院购票APP的开发与设计

基于 Android 剧院购票APP的开发与设计

摘要&#xff1a;近年来&#xff0c;随着社会的发展和科技方面的创新&#xff0c;越来越多的人选择使用手机应用程序来购买剧场票。本文将探讨基于 Android 平台的剧院购票应用程序的开发和设计。该应用程序将为用户提供浏览剧场列表、查看剧场详情、选择座位并购买剧场票的功能…
阅读更多...
sas数据转pandas

sas数据转pandas

1999年以后的nhanes数据都是以xpt文件格式发布的&#xff0c;而更早的数据有很多是以dat原始数据格式发布&#xff0c;需要将原始数据转为数据表以做进一步统计分析。 以 NHANES III 为例&#xff0c;其中有一个数据Household Youth File&#xff0c;包含3个数据文件youth.dat…
阅读更多...
Type C接口的PCB布局布线要求

Type C接口的PCB布局布线要求

USB Type C&#xff0c;又称为USB-C。需要注意的是Type-C只是一种接口&#xff0c;和USB的版本没有任何关系。该接口的亮点在于更加纤薄的设计、更快的传输速度&#xff08;最高10Gbps以及更强悍的电力传输&#xff08;最高100W)。 Type-C双面可插接口最大的特点的支持USB接口…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023