这个vue实现备忘录的功能demo是k在github上找到的，k觉得这是一个用来对vue.js入门的一个非常简单的demo，所以拿在这里共享一下。
（尊重他人劳动成果，从小事做起~ demo原github地址：）
一、实现效果
二、代码展示
备忘录 todos
// 本地缓存设置// 防止页面关闭后，数据全部丢失的问题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')
