Vue做一个史上最简单的todolist

用vue做一个简单的todolist应用，这应该是初学vue必经的阶段了，因为一个小小的demo里包含了挺多的vue常用的知识点。
这里，我们不用vue-cli搭建，不用那些乱七八糟的工具，直接引入官网上的cdn，做一个最简单的demo。
1.搭建基本的html结构，引入cdn，和我们的js。

image.png

2.写我们的js.用v-model双向绑定input和data里的inputValue，给input和button添加v-on事件。

image.png
image.png

这样就完成了最基本的添加事件。

image.png
3.v-for遍历list数组，双向绑定到li上面。给删除按钮添加删除事件remove
image.png
直接删除此项todo就可以了。
image.png

给checkbox绑定布尔值，来切换完成状态，span绑定class来显示完成状态。

image.png
image.png
image.png

好了，到了这里基本完成了添加，删除，改变完成状态这几个功能了。但是如果关闭了网页，之前添加的记录都会被删除。此时我们就可以用localStrorage来保存我们之前记录的数据。除非主动去删除，否则这些记录就会被一直保存着。
localStorage的用法如下：
localStorage.setItem(key, val)存储变量名为key，值为val的变量。key,val均为字符串。
localStorage.getItem(key)提取变量名为key的值
如果val为数组或者对象咋办，用JSON.stringify()将其转换成字符串。

function set(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}
function get(key) {
  return JSON.parse(localStorage.getItem(key));
}
var myStorage = {
  set: set,
  get: get
};

分别将两种方法封装，直接调用即可。
用watch函数监控list的变化。

 watch: {
    list: {
      deep: true,
      handler: function (newVal, oldVal) {
        if(newVal) {
          myStorage.set('list', newVal)
        }else{
          myStorage.set('list', oldVal)
        }
      }
    }
  }

在钩子函数中调用myStorage.get()方法，赋值给data里的list即可达到保存list数据的目的。

  mounted: function(){
    this.list = myStorage.get('list') || [];
  },

好，到这里基本完成了一些简单的功能，用到了v-model,v-on,v-for,v-bind指令。data,mounted,methods,watch函数。html5的localStorage技术。这算是一个史上最简单明了的vue-todolist了。当然里面bug很多。比如输入框不输入任何东西也能添加记录。本人知识有限，这个也仅仅是个练手demo。这些等以后再慢慢更新。过段时间我会写个更加完善更加美观的todolist。