（尊重他人劳动成果，从小事做起~ demo原github地址：）
一、实现效果
二、代码展示<!doctype html><html><head><meta charset="utf-8"><title>备忘录</title><link rel="stylesheet" type="text/css" href="css/index.css?1.1.11" /><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?1.1.11"></script><script language="javascript" src="js/vue.js?1.1.11"></script><script language="javascript" src="js/index_vue.js?1.1.11"></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')
以上就是vue.js实现备忘录功能详解的详细内容。