vue案例小黑记事本详解

大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。

正题开始。。。

案例叫做小黑记事本，大致长这个样子

大致功能是这个样子的，

1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中，

2.再放入的过程中会自动统计记录的数量，显示在左下角

3.当鼠标点击对应的列表项时，删除本条数据，其他数据重新排序

4.点击clear按钮，数据清零

开始具体的实现吧

一.，基本样式的编写

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>小黑记事本</title><style>*{margin: 0 ;padding: 0;background-color: #F0F0F0;}.todo{background-color: red !important;width: 98%;list-style: none;line-height: 35px;border-top:0.5px solid #E0E0E0;border-bottom:0.5px solid #E0E0E0;border-left:1px solid #E0E0E0;border-right:1px solid #E0E0E0;}#todoapp{width: 280px;margin: 100px auto;}h1{font-family:"隶书";font-size: 32px;color: saddlebrown;text-align:center;margin-bottom: 40px;}input::-webkit-input-placeholder {color: #9C9C9C;}.new-todo{outline: none;width: 95%;height: 35px;border:1px solid #E0E0E0;background-color: white;padding:0 4px;color: #9C9C9C;font-size: 15px;}.view{display: flex;padding:0 4px;color: #9C9C9C;font-size: 15px;background-color: white;}.index{flex: 1;background-color: white;}label{flex: 10;background-color: white;}.destroy{flex: 1;display: none;color: red;border: none;background-color: white;}.view:hover .destroy{display: block;}.todo-count{display: block;width: 95%;line-height: 20px;color: #9C9C9C;font-size: 10px;padding:0 4px;border:0.5px solid #E0E0E0;background-color: white;/*box-shadow:5px 5px 20px rosybrown;*/box-shadow:0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%), 0 0.5em 0 -0.25em #f2f2f2ed, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);}      strong{background-color: white;}.todo-clear{position: relative;background-color: white;color: #9C9C9C;font-size: 10px;top: -24px;left: 250px;border: none;}</style></head><body><section id="todoapp"><header class="header"><h1>小黑记事本</h1><input v-model="inputValue" @keyup.enter="add" class="new-todo" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" /></header><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{index+1}}</span><label>{{item}}</label><button class="destroy" @click="remove(index)">×</button></div></li></ul></section><footer class="footer"><span class="todo-count"><strong>{{list.length}}</strong> items left</span><button class="todo-clear" @click="clear">clear</button></footer></section></body><script>var app=new Vue({el:"#todoapp",data:{list:[],inputValue:"好好学习"},methods:{add:function(){},remove:function(index){},clear:function(){}}})</script>
</html>

二. 根据输入内容向列表添加事项

在这里使用表单的双向数据绑定将输入的内容获取到并添加到数组中，页面中渲染的就是数组中的数据，所以可以在我们代码中定义的add函数中添加处理逻辑

             add:function(){this.list.push(this.inputValue)      },

这样添加功能已经完成

三.显示数量功能

因为我们的数据是以数组的形式定义，所以数组有多长我们的数据就有几条，所以在上面的代码中我已经使用list.length完成了此项功能

四.清除功能

因为这个功能比较简单，所以我先实现这个功能。

点击清除按钮时触发事件，我定义的为clear，逻辑处理就是简单的让数组里的数组清零

 clear:function(){this.list=[]}

五.删除事项

在鼠标点击对应事项时触发删除事件，我这里定义的是remove，但这里需要的使用到事件的传参，因为我们需要知道删除的是哪条数据，所以传入对应的下标，然后使用数组的splice方法将数组中本条数据取出，功能实现。

上面代码中我已经定义了事件触发，所以这里我只展示逻辑处理代码remove:function(index){this.list.splice(index,1);},

今天的小黑记事本功能虽然比较简单，但是需要注意的细节有很多，就比如说，在逻辑处理的时候不能改变原始数组，以免影响数据的渲染。

总之，多多练习，祝大家学习进步。。。。