vue簡單案例--Todolist

感覺自己的vue快要忘光了，正好之前的vue博客拉下了，這次一併補上。這次帶來的是vue的最基礎案例，todolist，用到了緩存，模塊化封裝，和一些基本的vue語法。

看了上面的gif圖，是不是就大概能理解要做什麼，實現什麼功能了呢？接下來看一看具體的代碼：

<template>
  <div id="app">
    <div>
      <h2>tolist</h2>
      <input type="text" placeholder="請輸入" @keydown="giveThing">
    </div>
      <p>未完成事項</p>
      <!-- 此部分用到了v-if來判斷是否是已完成事件  利用v-for來循環渲染所有的事件 -->
      <ul>
        <li v-if="item.isck==false" v-for="(item,index) in lists" :key="index">
          <input @click="Isdone(index)" type="checkbox" :checked='item.isck'>{{item.title}}<button @click="dellist(index)">x</button>
        </li>
      </ul>
      <p>已完成事項</p>
      <ul>
        <li v-if="item.isck==true" v-for="(item,index) in lists" :key="index">
          <input @click="Isdone(index)" type="checkbox" :checked='item.isck'>{{item.title}}<button @click="dellist(index)">x</button>
        </li>
      </ul>
    <div>
    </div>
  </div>
</template>

<script>
// 導入緩存模塊  下一節代碼有介紹到
import Storage from './Public/Storage';
export default {
  name:'app',
  data(){
    return{
      // lists爲整個數據  isck爲是否完成
      lists:[
        {
          title:"javascript",
          isck:false
        },
        {
          title:"java",
          isck:false
        },
        {
          title:"html",
          isck:true
        }
      ]
    }
  },
  mounted(){
    this.lists=Storage.getStorage('todo')
  },
  methods:{
    giveThing(e){
      // 寫入未完成方法
      if(e.keyCode==13){
        let value=e.target.value;
        if(value!=''){
          this.lists.push({
            title:value,
            isck:false
          });
        }
        e.target.value='';
        Storage.saveStorage('todo',this.lists);
      }
    },
    Isdone(key){
      // 確實是否完成方法
      let ckvalue=this.lists[key].isck;
      this.lists[key].isck=!ckvalue;
      Storage.saveStorage('todo',this.lists);

    },
    dellist(index){
      // 刪除方法
      this.lists.splice(index,1); 
      Storage.saveStorage('todo',this.lists);

    },
  }
}
</script>

<style>
  #app{
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
    border: 1px solid black;
  }
</style>

緩存模塊代碼

let storage={
    saveStorage(key,value){//存入數據  在增加  改變狀態  刪除時需要調用此方法  
        // key爲存儲時的名字  上面代碼爲todo   value爲獲取的數據  爲json格式需要進行轉化
        localStorage.setItem(key,JSON.stringify(value));
    },
    getStorage(key){// 獲取數據 組件加載的時候需要調用此方法
        return JSON.parse(localStorage.getItem(key));
    },
    clearStorage(key){//刪除所有數據  沒有使用
        localStorage.clearItem(key);
    }
}
export default storage;