IMWeb训练营作业——todo list

来源：互联网发布：linux中的samba下载编辑：程序博客网时间：2024/06/04 19:48

通过这两天对todo list实例的学习与实践，对vue有了进一步的了解和认识。这次作业主要实现的功能包括：任务的添加、删除、编辑和选定，以及对所有任务、已完成任务和未完成任务的显示功能。具体实现代码如下：

HTML代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="index.css">    <title>todo list</title>    <script src="vue.js"></script></head><body><div id="header">    <p>任务计划列表</p></div><div id="main">    <div id="addTask">        <p>添加任务</p>        <input id="inputInfo" type="text" placeholder=""               @keyup.enter="addTodo"               v-model="todo"        />        <ul v-show="list.length">            <li><a href="#finished">完成的任务</a></li>            <li><a href="#unfinished">未完成的任务</a></li>            <li><a href="#all">所有任务</a></li>            <li id="taskUndo">{{noCheckedLength}}个任务未完成</li>        </ul>    </div>    <div id="taskList">        <p>任务列表</p>        <span v-show="!list.length">还未添加任何任务</span>        <ul>            <li  v-for="item in filteredList" :class="{completed:item.isChecked,editing:item===edtorTodos }">                <div>                    <input type="checkbox" class="chooseBox"  v-model="item.isChecked"   />                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>                    <div id="destroy" @click="deleteTodo">X</div>                </div>                <input class="edit" type="text" v-model="item.title" v-focus="item===edtorTodos"                        @blur="edtorTodoed"                        @keyup.enter="edtorTodoed"                        @keyup.esc="cancelTodo(item)"                        />            </li>        </ul>    </div></div><script src="app.js"></script></body></html>

JS代码：

var store={    save(key,value){        localStorage.setItem(key,JSON.stringify(value));    },    fetch(key){        return JSON.parse(localStorage.getItem(key))||[];    }};var list=store.fetch("MyPlanning");var vm=new Vue({    el: "#main",    data: {        list: list,        todo:"",        edtorTodos:'' ,  //正在编辑的内容        beforeTodos:'',  //记录正在编辑的数据的title        visibility:"all"    },    watch:{        list:        {            handler:function(){                store.save("MyPlanning",this.list);            },            deep:true        }    },    computed:{        noCheckedLength:function(){            return this.list.filter(function(item){                return !item.isChecked;            }).length;        },        filteredList:function(){            var filter={                all:function(list){                    return list;                },                finished:function(list){                    return list.filter(function(item){                        return item.isChecked;                    });                },                unfinished:function(list){                    return list.filter(function(item){                        return !item.isChecked;                    });                }            };            return filter[this.visibility]?filter[this.visibility](list):list;        }    },    methods: {        addTodo(){            this.list.push({                title: this.todo,                isChecked:false            });            this.todo="";        },        deleteTodo(todo){            var index=this.list.indexOf(todo);            this.list.splice(index,1);        },        edtorTodo(todo){   //编辑任务            this.beforeTodo=todo.title;            this.edtorTodos=todo;        },        edtorTodoed(){            this.edtorTodos='';        },        cancelTodo(todo){            todo.title=this.beforeTodo;            this.edtorTodos='';        }    },    directives:{        "focus":{            update(el,binding){                if(binding.value){                    el.focus();                }            }        }    }});function watchHashChange(){    var hash=window.location.hash.slice(1);    vm.visibility=hash;}watchHashChange();window.addEventListener("hashchange",watchHashChange);

主要应用到的知识点：

1.通过v-for指令完成对一组数组的选项列表的渲染

2.通过v-on指令来监听DOM事件的触发（简写为@）

3.事件修饰符的使用（如：.enter .ese .键值等）

4.通过v-model完成对数据的双向绑定

5.通过v-show指令完成条件渲染，即根据表达式的值来判断显示还是隐藏元素

6.通过v-bind指令动态绑定class，在条件满足时为元素添加类名显示不同的样式（v-bind简写为“：”）

7.自定义指令，在选项对象中添加directives属性完成对自定义指令的定义

8.通过计算属性可以完成对数据的过滤筛选，在选项对象的computed属性中定义

9.存取localStorage中的数据

10.通过监控哈希值对list数组进行筛选

最后运行的效果图：

1 0