[JavaScript知识库]vue写备忘录小案例的总结

vue写备忘录小案例的总结

十二月一号开始写的备忘录小案例,下面是我玩完成的截图,也就只能实现增删改查还有一些简单备忘录的功能

提前准备

首先在写之前应该把模块拆分清楚，应用组件化去设定设计思路，
这个案列，我们就可以吧他分为输入框和表单还有最后的页脚部分
表单里面是由一个一个列表元素构成的，所以就可以拆分出一个列表组件

第一部分，head组件，这里实现了增加元素的功能

首先在列表组件中有一个问题就是需要让每一个元素的id值不同，这时候就租要引入一个nanoid的包，这个包很小，使用 npm i nanoid 就可以安装好nanoid，让后当然要引入这个包

// 导入nanoid库
  import { nanoid } from "nanoid";

然后就可以使用了就直接调用

//  生成了一串随机的id
          const todoobj={id:nanoid(),total:this.titall,done:false}

第二部分：Item组件，实现了修改和删除