Vue小项目之模块化以及封装Storage实现todolist待办事项

input框中可以通过点击“添加”按钮或者回车添加待办事项，点击CheckBox选择框打钩，表示已完成，取消CheckBox前面的钩，表示未完成。点击删除可以删除该项。

项目效果：

完整代码：

1. App.vue（根组件）：

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doadd($event)">{{todo}}
    <input type="button" value="添加" @click="doadd($event)">
    <hr>
    <h2>未完成</h2>
    <ul>
      <li v-for="(item,key) in list" :key='key' v-if="!item.ok">
        <input type="checkbox" v-model="item.ok" @change="saveList()">{{item.name}}  <input type="button" value="删除" @click="removedata(key)">
      </li>
    </ul>

    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" :key='key' v-if="item.ok">
        <input type="checkbox" v-model="item.ok" @change="saveList()">{{item.name}}  <input type="button" value="删除" @click="removedata(key)">
      </li>
    </ul>
  </div>
</template>

<script>

import storage from './model/storage.js'

export default {
  name: 'app',
  data(){
    return {
      todo:'',
      list:[{
        ok:false,
        name:'默认项1'
      },{
        ok:false,
        name:'默认项2'
      }]
    }
  },
  methods:{
    doadd(e){
      if(e.keyCode == 13 || e.type == "click"){
        this.list.push({
          ok:false,
          name:this.todo
        })
        this.todo = ''
      }
      storage.set('list',this.list)
    },
    removedata(k){
      this.list.splice(k,1)
      storage.set('list',this.list)
    },
    saveList(){
      storage.set('list',this.list)
    }
  },
  mounted(){ //生命周期函数
    var list = storage.get('list')
    if(list){
      this.list = list
    }
  }
}
</script>

整个程序的主体用到了双向数据绑定相关内容。其中，doadd()函数可以向list中添加对象，并处理鼠标点击事件和键盘事件；removedata()函数可以删除list中的对象；saveList()函数可以保存CheckBox的值；mounted()为生命周期函数，程序加载立即执行。

2. storage封装：

// 封装localstorage本地存储方法 模块化文件

var storage = {
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    },
    get(key){
        return JSON.parse(localStorage.getItem(key)) 
    },
    remove(key){
        localStorage.removeItem(key)
    }
}

export default storage

对storage的使用，可以将js中的数据一直保存到浏览器中，直至删除或浏览器关闭。