vue --逻辑todolist

todo步骤

 准备了三种模板方便编码 (待办事项-要写入的内容:info(string)   状态iscomplete   输入内容newtodo     添加到的数组todolis
            普通状态    
            编辑状态
            未完成
    数据格式分析
        todo有多条 每条需要保存内容以及状态
        
    1.添加数据 
        for遍历
          使用v-model双向数据绑定 
          绑定按钮keyup.enter事件
        methods中添加新增的push()方法    this.todolist.push({  })
            
    2.删除一条数据

鼠标经过显示x号  
        找到删除按钮
        绑定点击事件  @click=removetodo(index)
        传入索引
        添加事件
        接收传递的索引
        删除数组中的元素下标即可removetodo(index){this.todolist.splice(index,1)}
    3.完成某一项

在input标签上绑定v-model="item.iscomplate"

        使用双向数据绑定同步checkbox跟数据的isCompleted
        使用v-bind:class 切换类型(v-bind:class="{active:item.isCompleted}")  如果data中isCompleted为true  添加complated类名 
              
    4.数据常驻

        使用localStorage实现
        读取数据
            实例化Vue的时候 读取即可(页面打开获取上次页面的数据)
            如果读取不到 使用 [] 设置为初始值
        保存数据
            window.onbeforeunload保存数据(  window.onbeforeunload.setItem())   只有在浏览器关闭时才保存 ,数据每次变更时就得使用监听器
            使用vue的侦听器实现
                watch
                结合深度监听(只能删除有反应  ,切换iscomplate  没效)
    8.进入编辑
        绑定双击事件   (传对象(item),不用索引,因为0是特殊情况   给label添加 @dbclick="enteredit(item) ")
        增加一个字段记录当前编辑的数据   

        通过判断循环的值 跟当前编辑的值是否相等 或者 移除类名

退出编辑状态

    9.保存编辑  (双击保存状态  使用v-model="item.info")

        使用双向数据绑定 实现label 跟编辑框数据的同步更新
    10.未完成个数显示

        侦听器
        计算属性
    11.筛选(添加一个类名select)

        data中增加属性保存筛选的条件
        a标签根据筛选的条件 确定是否添加类名
        a标签的点击事件中 设置筛选的条件为当前点击的a标签
        使用计算属性 根据筛选的条件返回不同的数组
        把页面中循环使用的数组 从总数组 替换为 计算属性中的那个数组