登录  /  注册
首页 > web前端 > js教程 > 正文

vue.js实现备忘录功能详解

巴扎黑
发布: 2017-07-23 15:26:26
原创
1894人浏览过

这个vue实现备忘录的功能demo是k在github上找到的,k觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下。

(尊重他人劳动成果,从小事做起~  demo原github地址:)

一、实现效果

 

 

二、代码展示

nbsp;html&gt;<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"&gt;  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 &amp;&amp; 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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号