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组件，实现了修改和删除

一：先讲修改操作注意要点
1。检验复选框是否勾选，选用:checked="todo.done"方法，来改变todo.id的值，实现数据的绑定
2. 通过v-show来实现编辑的时候出现的是input框还是span框，这里需要一个todo.edit来判断，他是布尔值，这里说一下，给对象创造属性的时候，要用this.$set(todo,'isedit',false)利用vc身上的$set方法来给创建一个isedit的属性，默认值为false

 <span v-show="!todo.isedit">{{todo.total}}</span>`
  <button
        v-show="!todo.isedit"
        class="btn  btn-edi"
        @click="edit(todo)">编辑</button>

这段代码是为了让他自动获取焦点，$nextTick方法 是在vue吧模版解析完了之后才执行

this.$nextTick(function () {
   this.$refs.al.focus()
   })

二：这里讲删除
1:删除操作主要是用过滤器（filter）来操作，
操作简单，主要懂一点 过滤器

  deleteid(id){
        if (confirm("你确定要删除吗"))
        this.todos=this.todos.filter(todo=>{
          return todo.id!==id;
        })
      },

第三部分：

这里是表单部分，能显示列表主要用了一个v-for来实现遍历存储信息的数组，从而来输出,

<UserItem v-for="todoobj in todos"
          :key="todoobj.id"
          :todo="todoobj"
         :changeblon="changeblon"
          :deleteid="deleteid"
></UserItem>

这里用了这么多绑定，是因为没有用时总线或者消息的订阅或发布来实现，当时还没学到这些，所以 用了最麻烦的办法

第四部分

第四部分就是页脚部分，应为涉及到很多变化的数据，所以使用了计算属性computed,首先全部完成的任务很简单，就是数组的长度吗，其次就是已完成的，要利用计算属性来计算，通过reduce方法来统计

 return this.todo.reduce((pre,current)=>{
    return pre+(current.done?1:0)

  },0)

其中要用到挺多的组件见通信，我都用的是最原始的方法