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