【IMWeb训练营作业】Vue TodoList Demo

效果图：

HTML:

  
  
  
  
  





  
添加任务
  
  

    
{{notCheckedLength}}个任务未完成
    

      所有
      未完成
      已完成
    
  
  
任务列表
  

    还没有添加任何任务
    

      

        

          
          {{item.title}}
          x
        
        
      
    
  

app.js

var store = {
  fetch: function (key) {
    return JSON.parse(localStorage.getItem(key)) || [];
  },
  save: function (key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  }
}


var filter = {
  all: function (list) {
    return list;
  },
  finished: function (list) {
    return list.filter(function (item) {
      return item.isChecked;
    })
  },
  unfinished: function (list) {
    return list.filter(function (item) {
      return !item.isChecked;
    })
  }
}


var list = store.fetch('todolist');


var vm = new Vue({
  el: '.main',
  data: {
    editingTodo: null,
    formerTitle: '',
    list: list,
    todo: '',
    visibility: 'all'
  },
  methods: {
    addTodo: function (e) {   // 添加任务
      this.list.push({
        title: this.todo,
        isChecked: false
      });
      this.todo = '';
    },
    deleteTodo: function (todo) {
      var index = this.list.indexOf(todo);
      this.list.splice(index, 1);
    },
    editTodo: function (todo) {
      this.formerTitle = todo.title;
      this.editingTodo = todo;
    },
    editTodoFinished: function (todo) {
      this.editingTodo = null;
      this.formerTitle = '';
    },
    cancelTodo: function (todo) {
      todo.title = this.formerTitle;
      this.editingTodo = null;
      this.formerTitle = '';
    }
  },
  computed: {
    notCheckedLength: function () {
      return this.list.filter(function (item) {
        return !item.isChecked
      }).length
    },
    filteredList: function () {
      return filter[this.visibility] ? filter[this.visibility](list) : list;
    }
  },
  directives: {
    focus: {
      update: function (el, binding) {
        if (binding.value == true) {
          el.focus();
        }
      }
    }
  },
  watch: {
    list: {
      handler: function (list) {
        store.save('todolist', list)
      },
      deep: true
    }
  }
});


function watchHashChange () {
  var hash = window.location.hash.slice(1);
  vm.visibility = hash || 'all';
}


watchHashChange();


window.addEventListener('hashchange', watchHashChange);