這個vue實現備忘錄的功能demo是K在github上找到的，K覺得這是一個用來對vue.js入門的一個非常簡單的demo，所以拿在這里共享一下。
（尊重他人勞動成果，從小事做起~ demo原github地址：https://github.com/vuejs/vue）
一、實現效果
二、代碼展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>備忘錄</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <style>[v-cloak] { display: none; }</style> </head> <body> <section class="todoapp"> <header class="header"> <h1>todos</h1> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo"> </header> <section class="main" v-show="todos.length" v-cloak> <input class="toggle-all" type="checkbox" v-model="allDone"> <ul class="todo-list"> <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }"> <div class="view"> <input class="toggle" type="checkbox" v-model="todo.completed"> <label @dblclick="editTodo(todo)">{{ todo.title }}</label> <button class="destroy" @click="removeTodo(todo)"></button> </div> <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> </li> </ul> </section> <footer class="footer" v-show="todos.length" v-cloak> <span class="todo-count"> <strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left </span> <ul class="filters"> <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li> <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li> <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li> </ul> <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> Clear completed </button> </footer> </section> <footer class="info"> <p>雙擊編輯一條備忘錄</p> </footer> </body> <script language="JavaScript" src="js/director.js"></script> <script language="JavaScript" src="js/vue.js"></script> <script language="JavaScript" src="js/index_vue.js"></script> </html>
// 本地緩存設置 // 防止頁面關閉后，數據全部丟失的問題 var STORAGE_KEY = 'todos-vuejs-2.0' var todoStorage = { // 獲取本地存儲中的內容 fetch:function(){ // JSON.parse()解析一個json字符串 // localStorage.getItem 從本地存儲中獲取STORAGE_KEY字段的值 var todos = JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]'); // foreach遍歷todos，兩個參數分別為遍歷出的每一個子單元及對應的索引 todos.forEach(function(todo,index){ todo.id = index; }) todoStorage.uid = todos.length; return todos; }, // 保存時將內容寫進本地存儲 save:function(todos){ // localStorage.setItem 將todos轉化成字符串存入本地存儲，鍵名為STORAGE_KEY localStorage.setItem(STORAGE_KEY,JSON.stringify(todos)) } } // 可視化狀態過濾設置 // 包括全選（all）、選擇未完成（active）、選擇已完成（completed） var filters = { all:function(todos){ return todos; }, // filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。 active:function(todos){ return todos.filter(function(todo){ return !todo.completed; }) }, completed:function(todos){ return todos.filter(function(todo){ return todo.completed; }) } } // vue實例化 var app = new Vue({ // data 參數設置 data:{ todos:todoStorage.fetch(), newTodo:'', editedTodo:null, visibility:'all' }, // watch 監視todos在本地儲存中的變化 watch:{ todos:{ handler:function(todos){ todoStorage.save(todos) }, deep:true } }, // computed 檢測數據發生變動時執行函數 computed:{ filteredTodos:function(){ return filters[this.visibility](this.todos) }, remaining:function(){ return filters.active(this.todos).length }, allDone:{ get:function(){ return this.remaining === 0 }, set:function(value){ this.todos.forEach(function(todo){ todo.completed = value }) } } }, // methods 方法設置 methods:{ addTodo:function(){ var value = this.newTodo && this.newTodo.trim() if(!value){ return; } this.todos.push({ id:todoStorage.uid++, title:value, completed:false }) this.newTodo = '' }, removeTodo:function(todo){ this.todos.splice(this.todos.indexOf(todo),1) }, editTodo:function(todo){ this.beforeEditCache = todo.title; this.editedTodo = todo }, doneEdit:function(todo){ if(!this.editedTodo){ return; }; this.editedTodo = null; todo.title = todo.title.trim() if(!todo.title){ this.removeTodo(todo) } }, cancelEdit:function(todo){ this.editedTodo = null; todo.title = this.beforeEditCache }, removeCompleted:function(){ this.todos = filters.active(this.todos) } }, directives:{ 'todo-focus':function(el,binding){ if(binding.value){ el.focus() } } } }) // hashchange URL的片段標識符更改觸發 function onHashChange(){ var visbility = window.location.hash.replace(/#\/?/, ''); if(filters[visbility]){ app.visibility = visbility }else{ window.location.hash = ''; app.visbility = 'all' } } window.addEventListener('hashchange',onHashChange) onHashChange() // mount 手動掛載 app.$mount('.todoapp')