$ npm install -g vue-cli$ vue init ，比如 vue init webpack todolist$ cd todolist$ npm install$ npm run dev

//后面的為注釋講解， ~表示串聯(lián)index.html的對(duì)應(yīng)內(nèi)容import 'todomvc-app-css/index.css'import Vue from 'vue'//添加localStoragevar STORAGE_KEY = 'todos-vuejs-2.0'var todoStorage = { fetch: function () {  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')  todos.forEach(function (todo, index) {   todo.id = index  })  todoStorage.uid = todos.length  return todos }, save: function (todos) {  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) }}//用過濾器篩選出三種狀態(tài)var filters = { all(todos) {  return todos }, active(todos) {  return todos.filter((todo) => {   return !todo.completed  }) }, completed(todos) {  return todos.filter((todo) => {   return todo.completed  }) },}let app = new Vue({ el: '.todoapp',  // ~ <section class="todoapp"> data: {  msg: 'hello world',  title: '待做清單',  // 渲染標(biāo)題 ~ {{title}}  newTodo: '',   todos: todoStorage.fetch(), // ~ v-show="todos.length" ； ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos"   editedTodo: '',  // 空的編輯對(duì)象  hashName: 'all'   },  watch: {  todos: {   handler: function (todos) {    todoStorage.save(todos)   },   deep: true  } },  computed: {  remain() {   return filters.active(this.todos).length  //未完成事項(xiàng)的數(shù)量 ~ {{remain}}  },   isAll: {   // ~ v-model="isAll"   get() {    return this.remain === 0   },   set(value) {    this.todos.forEach((todo) => {     todo.completed = value    })   }  },  filteredTodos() {  //用hashName過濾出當(dāng)前頁面的todos ~ v-for="(todo,index) in filteredTodos"    return filters[this.hashName](this.todos)  } }, methods: {  addTodo(e) { //輸入值為空時(shí)，不添加（trim去除前后空格） ~ v-model.trim="newTodo"    if (!this.newTodo) {    return   }   this.todos.push({    id: todoStorage.uid++,    content: this.newTodo,    completed: false //結(jié)合v-model 根據(jù)completed狀態(tài)綁定樣式 ~:class="{completed:todo.completed； ~ v-model="todo.completed"   })   this.newTodo = ''  },  removeTodo(index) {  //綁定x樣式，點(diǎn)擊刪除該todo ~ @click="removeTodo(index)"   this.todos.splice(index, 1)  },  editTodo(todo) {     //編輯 ~ @dblclick="editTodo(todo)"   this.editCache = todo.content //儲(chǔ)存編輯前的內(nèi)容   this.editedTodo = todo // 點(diǎn)擊編輯里面的內(nèi)容而不是只是空文本框~ editing:todo==editedTodo}"  },  doneEdit(todo, index) { //失去焦點(diǎn)后 ~ @blur="doneEdit(todo)"；@keyup.enter="doneEdit(todo)"   this.editedTodo = null //不存在編輯了或者說編輯已完成   if (!todo.content) { //如果編輯后沒有內(nèi)容了，刪除該todo    this.removeTodo(index)   }  },  cancelEdit(todo) {  //按esc鍵取消此次編輯操作 ~ @keyup.esc="cancelEdit(todo)">   this.editedTodo = null      todo.content = this.editCache //當(dāng)esc取消編輯時(shí)，還原編輯前的內(nèi)容  },  clear() { //點(diǎn)擊清除已完成的功能 ~ @click="clear"   this.todos = filters.active(this.todos) //獲取并渲染未完成的事項(xiàng) ~   } }, directives: {  //自定義屬性 ~ v-focus="todo == editedTodo"  focus(el, value) { //文本框雙擊獲取焦點(diǎn)   if (value) {    el.focus()   }  } }})//hash（url地址中#以及之后的字符）function hashChange() { // ~ :class="{selected:hashName=='all'}"；:class="{selected:hashName=='active'}"；:class="{selected:hashName=='completed'}" let hashName = location.hash.replace(/#//?/, '') //正則表達(dá)式去除#/？，獲取如all，active，completed if (filters[hashName]) {  //如果過濾狀態(tài)的hashName存在  app.hashName = hashName //給整個(gè)app變量里的hashName賦上那個(gè)值 } else {  location.hash = ''  //取消  app.hashName = 'all' //否則就賦值‘a(chǎn)ll'，回到全部事項(xiàng)的頁面 }}window.addEventListener('hashchange', hashChange) //全局監(jiān)聽hash