这个vue实现备忘录的演示是K在github上找到的，K觉得这是一个非常简单的vue.js入门的演示，所以在这里分享一下。

(尊重他人劳动成果，从小事做起~ demo原创github地址：https://github.com/vuejs/vue)

一、达到效果

二、代码显示

！DOCTYPE html html head meta charset=' UTF-8 '标题备忘录/title link rel='样式表type=' text/CSS ' href=' CSS/index。CSS ' rel='外部无跟随'/样式[v-斗篷]{ display : none；}/style/head body section class=' todo app ' header class=' header ' h1 todos/h1 input class=' new-todo '自动对焦自动完成='关闭'占位符='需要做什么？'v-model=' newTodo ' @向上键。enter=' addTodo '/header section class=' main ' v-show=' todos。长度' v --斗篷输入class=' toggle-all ' type=' checkbox ' v-model=' all done ' ul class=' todo-list ' Li v-for=' todo in filtereddods ' class=' todo ' : key=' todo。id ' : class=' {已完成： todo完成，edit : todo==edited dodo } ' div class=' view ' input class=' toggle ' type=' checkbox ' v-model=' todo。已完成的“label @ dbl click=‘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='=editeddodo ' @ blur=' donededit(todo left/span ul class=' filters ' lia href=' #/All ' rel=' external nofollow ' : class=' { selected : visibility=' All ' } ' All/a/Li lia href=' #/Active ' rel=' external nofollow ' : class=' { selected 333: visibility=' Active ' } 活动/a/Li lia href=' #/Completed ' rel='外部nofollow ' 33: class=' {选中双击编辑一条备忘录/p/页脚/正文脚本语言=' JavaScript ' src=' http : js/director。 js /脚本脚本语言=' JavaScript ' src=' http : js/vue。js /脚本脚本语言=' JavaScript ' src=' http : js/index _ vue。js /脚本/html//本地缓存设置//防止页面关闭后，数据全部丢失的问题var STORAGE _ KEY=' todos-vuejs-2.0 ' var todos STORAGE={//获取本地存储中的内容fetch :函数(){//JSON。解析()解析一个json字符串//localStorage.getItem从本地存储中获取存储_密钥字段的值var todos=JSON。解析(本地存储。getitem(STORAGE _ KEY)| | '[]')；//foreach遍历托多斯，两个参数分别为遍历出的每一个子单元及对应的索引todos.forEach(函数(todo，index){ todo。id=索引；})todos存储。uid=todos。长度；返回todos}，//保存时将内容写进本地存储保存：函数(todos){//本地存储。setitem将todos转化成字符串存入本地存储，键名为STORAGE _ KEY本地存储。setitem(STORAGE _ KEY，JSON。stringify(todos))}//可视化状态过滤设置//包括全选（所有)、选择未完成（活动)、选择已完成（已完成)var filters={ all : function(todos){ return todos；},//过滤器()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

激活：功能(todos){返回todos。filter(function(todo){ return！todo.completed}) }，完成了：函数(todos){ return todos。filter(function(todo){ return todo。已完成；})}//vue实例化var app=new Vue({ //数据参数设置数据： { todo s : }到存储。fetch()、newTodo: ' '、editedTodo:null、visibility:'all' }、//watch监视todos在本地储存中的变化watch : { todos : { handler : function(todos){ todos storage。save(todos)}，deep:true } }，//computed检测数据发生变动时执行函数computed : { filtereddots 3360 function(){ return filters[this。可见性】(这个。todos)}，remainin g: function(){返回筛选器。主动(这个。托多斯).length }、all done : { get: function(){ return this。restrict===0 }、set :函数(值){ this。托多斯。foreach(function(todo){ todo。已完成=value })} }，//方法方法设置方法： { add todo : FuncTion(){ var值=这个。牛顿这个。纽顿多。trim()if(！value){ return；}这个。托多斯。将({ id :)推入存储。uid，title:value，completed d : false })这。newtodo=' ' }，removetodo :函数(todo){ this。托多斯。拼接(这个。托多斯。indexof(todo)，1) }，edittodo 3360函数(todo){ this。beforededitcache=todo。标题；this.editedTodo=todo }，donedit :函数(todo){ if(！这个。edited dodo){ return；};this . editedtodo=null todo . title=todo . title . trim()if(！待办事项。标题){这个。removetodo(todo)}，canceledit :函数(todo){ this。editedtodo=null待办事项。标题=这个。beforededitcache }，remove completed : function(){ this。todos=筛选器。主动(这个。todos)}，指令： { ' todo-focus ' :函数(El，binding){ if(binding。值){ El。focus()} } } })//hashchange URL的片段标识符更改触发函数onhashChange(){ var visibility=window。位置。哈希。替换(/# /？/, '');if(筛选器[可见性]){ app。可见度=可见度} else { window。位置。哈希=' '；app。可视性=' all ' } }窗口。addeventlistener(' hashchange '，onHashChange)onHashChange()//mount手动挂载应用程序.$mount(' .todoapp’)以上这篇vue.js实现备忘录功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。