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

本文介绍了如何使用Vue开发一个基本的小黑记事本应用,包括添加任务(v-model配合unshift)、删除任务(filter方法)、统计任务数量以及清空任务的功能。通过实例展示了列表渲染、事件处理和数据管理的关键技术。
摘要由CSDN通过智能技术生成

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

今天的学习任务是做一个小黑记事本,一个小案例进行练习。
经过前几周的学习,相信大家对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 控制隐藏

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值