IMWeb训练营作业

这是预览图

这是demo预览地址

这是主要js的详细代码

var store = {
    save(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key)) || [];
    }
}

var list = store.fetch("todolist");

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;
        })
    }
}

var vm = new Vue({
    el:".main",
    data:{
        list:list,
        todo:"",
        editortodos:"",
        beforeContent:"",
        visibility:"all"  //all finished unfinished
    },
    watch:{
        /*list:function(){
            store.save("todolist",this.list);
        }*/
        list:{
            handler:function(){
                store.save("todolist",this.list);
            },
            deep:true
        }
    },
    methods:{
        addTodo(event){
            this.list.push({
                content:this.todo,
                isChecked:false
            });
            this.todo = "";
        },
        removeTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        editorTodo(todo){
            this.beforeContent = todo.content;
            this.editortodos = todo;
        },
        editorTodoend(todo){
            this.editortodos = "";
        },
        cancelTodo(todo){
            todo.content = this.beforeContent;
            this.editortodos = "";
        }
    },
    directives:{
        "foucs":{
            update(el,binding){
                if (binding.value) {
                    el.focus();
                }
            }
        }
    },
    computed:{
        noCheckLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked
            }).length;
        },
        filterList:function(){
            return filter[this.visibility]?filter[this.visibility](list):list;
        }
    }
});

function watchHashChange(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);