用vue做一個(gè)簡單的todolist應(yīng)用，這應(yīng)該是初學(xué)vue必經(jīng)的階段了，因?yàn)橐粋€(gè)小小的demo里包含了挺多的vue常用的知識(shí)點(diǎn)。
這里，我們不用vue-cli搭建，不用那些亂七八糟的工具，直接引入官網(wǎng)上的cdn，做一個(gè)最簡單的demo。
1.搭建基本的html結(jié)構(gòu)，引入cdn，和我們的js。

image.png

2.寫我們的js.用v-model雙向綁定input和data里的inputValue，給input和button添加v-on事件。

image.png

image.png

這樣就完成了最基本的添加事件。

image.png

image.png

image.png

給checkbox綁定布爾值，來切換完成狀態(tài)，span綁定class來顯示完成狀態(tài)。

image.png

image.png

image.png

好了，到了這里基本完成了添加，刪除，改變完成狀態(tài)這幾個(gè)功能了。但是如果關(guān)閉了網(wǎng)頁，之前添加的記錄都會(huì)被刪除。此時(shí)我們就可以用localStrorage來保存我們之前記錄的數(shù)據(jù)。除非主動(dòng)去刪除，否則這些記錄就會(huì)被一直保存著。
localStorage的用法如下：
localStorage.setItem(key, val)存儲(chǔ)變量名為key，值為val的變量。key,val均為字符串。
localStorage.getItem(key)提取變量名為key的值
如果val為數(shù)組或者對(duì)象咋辦，用JSON.stringify()將其轉(zhuǎn)換成字符串。

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
};

分別將兩種方法封裝，直接調(diào)用即可。
用watch函數(shù)監(jiān)控list的變化。

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

在鉤子函數(shù)中調(diào)用myStorage.get()方法，賦值給data里的list即可達(dá)到保存list數(shù)據(jù)的目的。

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

好，到這里基本完成了一些簡單的功能，用到了v-model,v-on,v-for,v-bind指令。data,mounted,methods,watch函數(shù)。html5的localStorage技術(shù)。這算是一個(gè)史上最簡單明了的vue-todolist了。當(dāng)然里面bug很多。比如輸入框不輸入任何東西也能添加記錄。本人知識(shí)有限，這個(gè)也僅僅是個(gè)練手demo。這些等以后再慢慢更新。過段時(shí)間我會(huì)寫個(gè)更加完善更加美觀的todolist。