分享一个用vue写的todolist的待办事宜

通过数据的双向绑定，列表循环渲染和localstorage本地缓存完成。

虽然是个简单的例子但是这里面包含的东西对vue的初学者来说还是挺多的。

直接贴上代码吧

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="add($event)">
    <button @click="add1()">增加</button>
    <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()">
        <a>{{item.title}}</a>
        <button @click="aaa(key)">删除</button>
      </li>
    </ul>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()">
        <a v-bind:class="{red:true}">{{item.title}}</a>
        <button @click="aaa(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
//export default 固定语法把这个组件暴露出去
//moedel里面封装了storage
import storage from './model/storage.js';
export default {
  data () {
    return {
        ok:true,
        todo:"",
        list:[],
    }
  },
  methods:{
      add(e){
          /*keyCode值为13为回车*/
          if(e.keyCode===13){
            this.list.push({
                title:this.todo,
                checked:false
            });
            this.todo="";
          }
          /*缓存功能*/
          storage.set('list',this.list);
      },
        //单击回车事件
         add1(){
          /*keyCode值为13为回车*/
          this.list.push({
              title:this.todo,
              checked:false
          });
          this.todo="";
          storage.set('list',this.list);
      },
      aaa(key){
          this.list.splice(key,1)
      },
      savelist(){
          storage.set('list',this.list);
      }
  },
    /*生命周期函数实现缓存页面刷新就触发*/
    mounted(){
        var list = storage.get('list');
        if(list){
            this.list = list;
        }
    }
}
</script>

<style>
  .red{color:red}
</style>

1.里面包括了v-model数据双向绑定，直接获取输入的内容。

2.然后放到list数组中通过v-for列表进行渲染呈现出来。

3.添加一个input的checked复选框，通过复选框的选中状态来给li的v-if进行赋值，当点击checkbox时checked值会改变，并且通过数据绑定同步到list，进而实现切换效果

4.给每个li加上一个v-on：click事件来删除不想要的事宜。

5.同时还给输入框加上单击回车键添加的功能提升用户体验。

6.页面刷新过后之前添加的就全部消失了；这里我们用localstorage本地缓存来存储数据，每一次添加保存和删除都保存一次。

这里还要用到vue的一个生命周期函数mounted，让存储的数据在页面加载时加载。（这里多次用到localstorage通过node.js将代码进行封装）

//封装本地存储方法，这是模块化文件
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;

封装的函数放在

这是一个.vue的文件我们将这个称为一个vue的组件。和传统的jq dom操作相比，通过vue.js可以很方便的实现这样功能。