IMWeb训练营作业

本项目为IMWeb训练营作业，功能就是一个精简版todoList应用。

最终效果图：

主要功能点：1、添加任务：通过添加按钮和监听回车键实现添加任务并存储到localstorage(H5新特性)中。代码：addToDo:function(e){//添加任务if(!this.todo){alert("内容不能为空哦")//内容不为空才能添加}else{this.list.unshift({title:this.todo,isChecked:false})}this.todo='';

2、编辑任务：通过双击任务就能实现编辑、监听键盘esc键可实现取消编辑。代码：<label @dblclick="edttodo(item)">{{item.title}}</label>edttodo:function (todo) {//编辑任务this.edtTodos=todo;this.beforeTitle=todo.title//记录下一title，方便取消时还原}

3、删除任务：鼠标悬停某个任务上时，会显示删除按钮，点击即可删除 。代码：deleteTodo:function (e) {//删除任务            var index=this.list.indexOf(e)//找到索引位置            this.list.splice(index,1)        }前台调用：    {{noCheckedLength}}个任务未完成！

4、实时提醒任务未完成：通过vue的computed方法计算有多少个任务未完成。noCheckedLength:function() {return  this.list.filter(function(item,index){//数据过滤，返回未完成的任务return !item.isChecked}).length//个数}5、通过点击导航菜单，可显示不同状态下的任务

通过监听浏览器地址栏的hash值来完成切换数据。filterList:function () {//过滤有三种情况return filter[this.visibility]?filter[this.visibility](list):list;}var filter={all:function (list) {return list;},finished:function () {return list.filter(function (item) {return item.isChecked;})},unfinished:function () {return list.filter(function (item) {return !item.isChecked;})}}function watchHashChange() {var hash=window.location.hash.slice(1);console.log(hash)vm.visibility=hash;}watchHashChange()window.addEventListener("hashchange",watchHashChange)以上为todoList主要功能。总结：该项目主在运用了vue这个框架。初步了解了它的用法与特点。1、采用mvvm(model=>view=>viewModel)模型，有别于传统框架频繁操作Dom。2、灵活的事件监听机制。3、事件调用、数据渲染不用操心。希望VUE能发展的越来越好，毕竟作为一个国产的框架来说是非常了不起的了。

链接：http://www.9ooy.com/vuedemo/todoList.html