刘贵学博客

夯实Vue系列 Demo 5 综合示例:TodoList

这里我们给出一个简单的 Todo List使用示例,提供的操作如下:

  • 新增:在输入框中输入内容,回车可新增;
  • 修改:单击条目可设置为完成;
  • 删除:双击条目可删除;

代码实现

1. index.vue 模板

模板里用3个事件来实现基本需求:

  • addItem 新增,在输入框中输入内容,回车可新增
  • toggleFinish,修改,单击条目可设置为完成;
  • deleteItem, 删除,双击条目可删除;

    <template>
    <div id="todo-app">
    <h1 v-text="title"></h1>
    
    <p class="note" >操作提醒:
      <br />* 新增:在输入框中输入内容,回车可新增
      <br />* 修改:单击条目可设置为完成;
      <br />* 删除:双击条目可删除;
      <br /> <br />
    </p>
    
    <input type="text" v-model="newItem" v-on:keyup.enter="addItem">
    
    <ul>
      <li v-for="item in items" v-bind:class="{'cls-finished': item.isFinished}"
          @click="toggleFinish(item)"  @dblclick="deleteItem(item)">
        {{ item.label }}
      </li>
    </ul>
    
    </div>
    </template>
    
    

    2. index.vue 脚本

  • methods实现3个事件: addItem、toggleFinish & deleteItem;

  • items 数据的管理:

    • DataStore.fetch() 获取当前所有的记录;
    • 在watch里,如果 items任何改变,将调用 DataStore.save(items) 保存数据
    <script>
    import DataStore from './DataStore.js'
    
    Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
    };
    
    export default {
    data(){
      return {
        title:"Todo List",
        items:  DataStore.fetch(),
        newItem:""
      }
    },
    methods: {
      toggleFinish(item){
        item.isFinished = !item.isFinished;
      },
      addItem(){
        this.items.push({label:this.newItem, isFinished:false});
        this.newItem  = "";
      },
    
      deleteItem(item){
        this.items.remove(item);
      }
    },
    
    watch:{
      items : {
        handler: function (items) {
          DataStore.save(items);
        },
        deep: true
      }
    }
    }
    </script>
    
    

3. DataStore.js

fetch 和 save的实现:

  • fetch, 从本地存储(localStorage)中获取记录;
  • save, 将记录保存到localStorage里;

DataStore相当于一个本地数据库。

const ITEMS_KEY ='todo_items';

export default {
  fetch(){
    return JSON.parse(
      window.localStorage.getItem(ITEMS_KEY) ||'[]')
  },

  save(items){
    window.localStorage.setItem(
      ITEMS_KEY,JSON.stringify(items));
  }
}

运行效果

本文中的所有代码,请参考:
https://coding.net/u/guixue/p/vue-starter/git/commit/8490ab2afe5443badc

注: 本例参考自视频教程: vue.js入门基础 推荐各位观看。