学习尚硅谷Vue的TodoList案例总结

今天学习尚硅谷Vue的TodoList案例一到四节的内容，该案例是一个类似手机上的代办事项功能，这个功能要实现可以添加和删除事件还有已完成或未完成的勾选框可勾选，在实现功能的时候我们大致要把页面的内容划分为几块去一一实现，该案例就把页面划分为四部分（头部、列表、项目，脚部）去实现，为了节省时间就直接复制课件提供的html和css代码，我们重点是写交互部分的代码，拿到html和css代码之后要给四个区域的vue文件里复制结构和样式代码，第二步就是实现第一个功能把数据渲染到页面上，因为每条数据都要有id、事项名、勾选转态，内容比较多，所以这个功能的思路是把每一条数据都做为一个对象的形式包裹在一个大的数组内，渲染的时候只需使用v-for把数组的元素都遍历一遍渲染到页面上，这里会遇到一个问题就是数据和要操作渲染的文件不是同一个文件，一个是列表文件一个是项目文件，这时就需要用到之前学过的props配置项来接收其他文件传过来的数据，但在渲染之前我们要把数据设计好，也就是需要渲染用到的数据，首先是id如何随机生成的问题，老师就提供了一个第三方库nanoid，引入这个库之后就可以通过nanoid()这个方法来生成一个随机数作为id的值了，二个问题就是如何获取到用户输入的事项名，这里用到的是事件对象来获取到元素的value值作为事项名，第三个问题就是用什么来表示用户的勾选状态，想到这个状态只有两种情况事果断采用布尔值的形式表示是否勾选，这些数据的详细内容都准备好之后就可以开始渲染了。刚才实现的是列表和项目文件的内容，接下来要实现的是头部的用户输入部分，这里首先要给回车按键绑定一个方法，因为用户输入完之后按下回车，我们就可以开始在这个方法里面写搜集数据相关的操作，首先就是把用户输入的数据放入一个对象里（因为开开始就采取了这种方式来存储数据），然后将获取到的数据对象赋值给数据的数组，这样就添加了一条新的数据，获取完之后发现输入框还会留下刚才输入的内容，所以要想办法在用户按下回车之后将输入框清空，秉着尽量不要直接操作DOM的原则，采用了v-model双向数据绑定，把用户输入的数据直接放到data数据里（相当于借助了data数据管理间接的操作了元素），在获取到数据并赋值给数据数组时将data里面的数据赋值为空就可以实现输入框清空的效果了，这也是巧妙的利用了双向数据绑定这个特性。该案例还有几课，等学习完再做总结分享给大家。