摘要：完成成品基于的示例，麻雀雖小，五臟俱全技術(shù)棧功能描述使用說明添加備忘錄輸入標(biāo)題后回車添加如果內(nèi)容為空或只有空格會清空，什么都不添加刪除備忘錄點擊標(biāo)題后面的叉完成備忘錄點擊標(biāo)題前面的復(fù)選框編輯備忘錄雙擊標(biāo)題進入編輯模式取消編輯備忘錄按或者

基于Vue的TodoList示例，麻雀雖小，五臟俱全

Vue + localStorage + hash

添加備忘錄(輸入標(biāo)題后回車添加,如果內(nèi)容為空或只有空格會清空，什么都不添加)

刪除備忘錄(點擊標(biāo)題后面的叉)

完成備忘錄(點擊標(biāo)題前面的復(fù)選框)

編輯備忘錄(雙擊標(biāo)題進入編輯模式)

取消編輯備忘錄(按ESC或者失去焦點時)

完成編輯備忘錄(按回車鍵完成[如果內(nèi)容為空的時候會自動刪除]，此時也會調(diào)用到失去焦點事件)

一鍵完成所有備忘錄(點擊第一行的復(fù)選框)

過濾任務(wù)，顯示全部，未完成，已完成的備忘錄(點擊全部，未完成，已完成按鈕)

清空已完成備忘錄(點擊清空已完成)

npm init -y
npm i -S underscore vue todomvc-app-css
vim index.html
復(fù)制格式化后的html
引入css
將英文標(biāo)題換成中文標(biāo)題
引入vue.js
新建vue的實例
寫一個默認的任務(wù)：todoList: [{}]

  // 新建一個Vue的實例對象
  var todoapp = new Vue({
    // 掛載
    el: ".todoapp",
    // 數(shù)據(jù)
    data: {
         // 備忘錄數(shù)組
      todoList: [
        // 一個任務(wù)就是一個對象，text表示任務(wù)的名稱，checked為true表示已完成，false表示未完成
        {
          text: "學(xué)Vue",
          checked: false
        },
        {
          text: "學(xué)React",
          checked: false
        }
      ]
    },
    方法
    methods: {

    },
    // 計算屬性
    computed: {

    }
  })

data: {
      newTodo: "",
      todos: todoStorage.fetch(),
      editedTodo: null,
      beforeEditCache: "",
      visibility
    }

computed: {
      //顯示任務(wù)總數(shù)量
      showTodos() {
        return this.todos.length > 0
      },
      //未完成
      activeCount() {
        return filters.active(this.todos).length
      },
      //已完成
      completedCount() {
        return filters.completed(this.todos).length
      },
      //判斷所有任務(wù)
      allDone: {
        get() {
          return this.activeCount === 0
        },
        set(value) {
          this.todos.map(todo => {
            todo.completed = value
          })
        }
      },
      //判斷
      filteredTodos() {
        return filters[this.visibility](this.todos)
      }
    }

//store.js的判斷獲取
(function(){
  var STORAGE_KEY = "todos"
  window.todoStorage = {
    fetch() {
      try {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]")
      } catch(err) {
        return [];
      }
    },
    save(todos) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    }
  }
})();

 var filters = {
    all: todos => todos,
    active: todos => todos.filter(todo => !todo.completed),
    completed: todos => todos.filter(todo => todo.completed)
  }
  var visibility = location.hash.substr(location.hash.indexOf("/")+1)
  visibility = visibility === "" ? "all" : visibility

watch: {
      todos: {
        deep: true,
        handler: todoStorage.save//判斷當(dāng)前應(yīng)顯示的內(nèi)容
      }
    }

methods: {
      addTodo() {
        this.newTodo = this.newTodo.trim()
        if (!this.newTodo) {
          return
        }
        this.todos.unshift({
          title: this.newTodo,
          completed: false
        })
        this.newTodo = ""
      },
      removeTodo(todo) {
        var index = this.todos.indexOf(todo)
        this.todos.splice(index, 1)
      },
      editTodo(todo) {
        this.editedTodo = todo
        this.beforeEditCache = todo.title
      },
      doneEdit(todo) {
        if (!this.editedTodo) {
          return;
        }
        this.editedTodo = null;
        todo.title = todo.title.trim()
        if (!todo.title) {
          this.removeTodo(todo)
        }
      },
      cancelEdit(todo) {
        if (this.editedTodo) {
          todo.title = this.beforeEditCache
          this.editedTodo = null
        }
      },
      removeCompleted() {
        this.todos = filters.active(this.todos)
      }
    }

 directives: {
      focus: {
        update(el) {
          el.focus()
        }
      }
    }