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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

分布式ID

分布式ID

分布式ID 背景Snowflake（雪花算法）uid-generator实战美团leaf实战代码地址背景 分布式系统，用什么做为主键呢？ uuid 太长（MySQL官方有明确的建议主键要尽量越短越好[4]，36个字符长度的UUID不符合要求。）、 无规律（在InnoDB引擎下，UUID的无序性可能会引起数据位置频繁…
阅读更多...
【Python】代理池针对ip拦截破解

【Python】代理池针对ip拦截破解

代理池是一种常见的反反爬虫技术&#xff0c;通过维护一组可用的代理服务器&#xff0c;来在被反爬虫限制的情况下&#xff0c;实现数据的爬取。但是&#xff0c;代理池本身也面临着被目标网站针对ip进行拦截的风险。 本文将详细介绍代理池针对ip拦截破解的方法&#xff0c;包含…
阅读更多...
【C++杂货铺】探索string的底层实现

【C++杂货铺】探索string的底层实现

文章目录 一、成员变量二、成员函数2.1 默认构造函数2.2 拷贝构造函数2.3 operator2.4 c_str()2.5 size()2.6 operator[ ]2.7 iterator2.8 reserve2.9 resize2.10 push_back2.11 append2.12 operator2.13 insert2.14 erase2.15 find2.16 substr2.17 operator<<2.18 opera…
阅读更多...
C++，类的特殊函数练习

C++，类的特殊函数练习

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 #include <iostream> using namespace std;cla…
阅读更多...
设计模式（9）建造者模式

设计模式（9）建造者模式

一、 1、概念&#xff1a;将一个复杂对象的构造与它的表示分离&#xff0c;使得同样的构造过程可以创建不同的表示。建造者模式主要用于创建一些复杂的对象&#xff0c;这些对象内部构建间的顺序通常是稳定的&#xff0c;但对象内部的构建通常面临着复杂的变化&#xff1b;建造…
阅读更多...
leetcode:338. 比特位计数(python3解法)

leetcode:338. 比特位计数(python3解法)

难度&#xff1a;简单 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;[0,1,1] 解释&#xff1a; 0…
阅读更多...
Verilog 入门

Verilog 入门

Verilog 入门 本内容来自 牛客网Verilog入门特别版 1、一个没有输入和一个输出常数1的输出的电路&#xff0c;输出信号为one module top_module(one);output wire one;assign one 1b1; endmodule2、创建一个具有一个输入和一个输出的模块&#xff0c;其行为类似于电路上的连…
阅读更多...
密码学学习笔记(十九)：密码学关键术语的解释1

密码学学习笔记(十九)：密码学关键术语的解释1

数据加密标准(DES) 数据加密标准是使用最广泛的加密体制&#xff0c;它于1977年被美国国家标准和技术研究所(NIST)采纳为联邦信息处理标准FIPS PUB 46。 DES3DESAES明文分组长度&#xff08;位&#xff09;6464128密文分组长度&#xff08;位&#xff09;6464128密钥长度&…
阅读更多...
分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-CNN-BiGRU-Attention多特征分类预测&#xff0c;多特征输入模型&…
阅读更多...
论文解读 | 解释和利用对抗性示例

论文解读 | 解释和利用对抗性示例

原创 | 文 BFT机器人 摘要 ABSTRACT 这篇论文研究了神经网络和其他机器学习模型在错误分类对抗性示例方面的问题。对抗性示例是通过对数据中的示例应用微小但故意的扰动来生成的&#xff0c;导致模型输出错误答案。以往的解释主要集中在非线性和过拟合上&#xff0c;然而&…
阅读更多...
概念解析 | 稀疏正则化

概念解析 | 稀疏正则化

稀疏正则化&#xff1a;从理论到实践的简要解析 注1&#xff1a;本文系“概念解析”系列之一&#xff0c;致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是&#xff1a;稀疏正则化。 Group-sparsity regularization enforcement: (a) the columns of the… | Dow…
阅读更多...
STM32 CubeMX （第三步Freertos中断管理和软件定时）

STM32 CubeMX （第三步Freertos中断管理和软件定时）

STM32 CubeMX STM32 CubeMX &#xff08;第三步Freertos中断管理和软件定时&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fre…
阅读更多...
The last packet sent successfully to the server was 0 milliseconds ago.报错

The last packet sent successfully to the server was 0 milliseconds ago.报错

报错图&#xff1a; 解决方法 多半是代码拼写错误&#xff0c;如localhost拼成local。 注意驱动版本应与mysql版本对应 maven包配置按照自己下的位置设置&#xff0c;最好不要默认
阅读更多...
c++ day1

c++ day1

定义一个命名空间Myspace&#xff0c;包含以下函数&#xff1a;将一个字符串中的所有单词进行反转&#xff0c;并输出反转后的结果。例如&#xff0c;输入字符串为"Hello World"&#xff0c;输出结果为"olleH dlroW"&#xff0c;并在主函数内测试该函数。 …
阅读更多...
【数据结构与算法】—— 手撕红黑树

【数据结构与算法】—— 手撕红黑树

目录 &#xff08;一&#xff09;红黑树的定义 1、红黑树的引入 2、红黑树的概念 3、红黑树的性质 &#xff08;二&#xff09;红黑树的操作 1、红黑树节点的定义 2、红黑树的插入操作 1️⃣ 思路 2️⃣ 代码实现 3、红黑树的删除操作&#xff08;了解&#xff09; …
阅读更多...
ssm汽车养护管理系统源码和论文

ssm汽车养护管理系统源码和论文

ssm汽车养护管理系统038 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 开题报告内容&#xff1a;&#xff08;研究现状、目的意义&#xff1b;基本内容、研究方法、参考文献等。&#xff09; 研究现状 国外…
阅读更多...
【中危】Apache Ivy＜2.5.2 存在XXE漏洞 （CVE-2022-46751）

【中危】Apache Ivy＜2.5.2 存在XXE漏洞 （CVE-2022-46751）

漏洞描述 Apache Ivy 是一个管理基于 ANT 项目依赖关系的开源工具&#xff0c;文档类型定义(DTD)是一种文档类型定义语言,它用于定义XML文档中所包含的元素以及元素之间的关系。 Apache Ivy 2.5.2之前版本中&#xff0c;当解析自身配置、Ivy 文件或 Apache Maven 的 POM 文件…
阅读更多...
IntelliJ IDEA 官方网站 idea官网 http://www.jetbrains.com/idea/

IntelliJ IDEA 官方网站 idea官网 http://www.jetbrains.com/idea/

IntelliJ IDEA 官方网站 idea官网 http://www.jetbrains.com/idea/ Idea下载官网一键直达&#xff1a; 官网一键直达
阅读更多...
【STM32】FreeRTOS软件定时器学习

【STM32】FreeRTOS软件定时器学习

软件定时器 FreeRTOS提供了现成的软件定时器功能&#xff0c;可以一定程度上替代硬件定时器&#xff0c;但精度不高。 实验&#xff1a;创建一个任务&#xff0c;两个定时器&#xff0c;按键开启定时器&#xff0c;一个500ms打印一次&#xff0c;一个1000ms打印一次。 实现&…
阅读更多...
关于模板的大致认识【C++】

关于模板的大致认识【C++】

文章目录 函数模板函数模板的原理函数模板的实例化模板参数的匹配原则 类模板类模板的定义格式类模板的实例化 非类型模板参数typename 与class模板的特化函数模板特化类模板特化全特化偏特化 模板的分离编译 函数模板 函数模板的原理 template <typename T> //模板参数…
阅读更多...
最新文章

Copyright @ 2022~2023