这个vue实现备忘录的功能demo是k在github上找到的,k觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下。
(尊重他人劳动成果,从小事做起~ demo原github地址:)
nbsp;html><meta><title>备忘录</title><link><style>[v-cloak] { display: none; }</style><section> <header><h1>todos</h1> <input> </header> <section><input><ul> <li> <div> <input> <label>{{ todo.title }}</label> <button></button> </div> <input> </li> </ul> </section> <footer><span> <strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left</span><ul> <li><a>All</a></li> <li><a>Active</a></li> <li><a>Completed</a></li> </ul> <button> remaining"> Clear completed</button> </footer></section><footer><p>双击编辑一条备忘录</p></footer><script></script><script></script><script></script>
// 本地缓存设置// 防止页面关闭后,数据全部丢失的问题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实现备忘录功能详解的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号