【IMWeb训练营作业】vue-Todolist

这几天学习了一下如何用vue完成todolist的小demo，自己也完成了一个如下

主要有以下功能：

• 1.添加计划
• 2.删除计划
• 3.显示为完成计划
• 4.编辑计划
• 5.本地存储计划
• 6.hash渲染列表

一、首相布局我在这里就不介绍布局了，直接奉上vue代码：

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

    }
}
//取出所有值
var list =store.fetch("wo-de");

var vm=new Vue({
    el: ".main",
    data: {
        list: list,
        todo: "",
        edtorTodos: '',  //记录正在编辑的数据
        beforeTitle: '' ,//记录正在编辑的数据的title
        visibility:"all"
    },
    watch:{
        // list:function () {     //监控list这个属性，当这个属性对应的值发生变化就会执行函数
        //   store.save("wo-de",this.list);
        // }
        list:{
            handler:function(){
                store.save("wo-de",this.list);
            },
            deep:true
        }
    },
    computed: {
        noCheckeLength: function () {
            return this.list.filter(function (item) {
                return !item.isChecked
            }).length
        },
        filteredList:function(){
            //3种情况
            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](list);
        }
    },
    methods: {
        addTodo(){  //添加任务
            this.list.push({
                title: this.todo,
                isChecked: false
            });
            this.todo = '';
        },
        deleteTodo(n){ //删除任务
            var index = this.list.indexOf(n);
            this.list.splice(index, 1);
        },
        edtorTodo(todo){  //编辑任务
            console.log(todo);
            //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
            this.beforeTitle = todo.title;

            this.edtorTodos = todo;


        },
        edtorTodoed(todo){ //编辑任务成功
            this.edtorTodos = '';
        },
        cancelTodo(todo){  //取消编辑任务

            todo.title = this.beforeTitle;

            this.beforeTitle = '';

            //让div显示出来，input隐藏
            this.edtorTodos = '';
        }
    },
    directives: {
        "foucs": {
            update(el, binding){
                if (binding.value) {
                    el.focus();
                }
            }
        }
    }
});
function watchHashChaange(){
    var hash=window.location.hash.slice(1);
    vm.visibility=hash;
}
watchHashChaange();
window.addEventListener("hashchange",watchHashChaange);

二、怎么添加删除计划，计算未成计划

addTodo(){  //添加任务
            this.list.push({
                title: this.todo,
                isChecked: false
            });
            this.todo = '';
        },
        deleteTodo(n){ //删除任务
            var index = this.list.indexOf(n);
            this.list.splice(index, 1);
        },

以上是添加任务删除的函数

computed: {
        noCheckeLength: function () {
            return this.list.filter(function (item) {
                return !item.isChecked
            }).length
        },

以上是自定义计算属性，来返回没有被勾选的计划依旧是未完成计划

三、如何编辑计划

功能代码如下

edtorTodo(todo){  //编辑任务
            console.log(todo);
            //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
            this.beforeTitle = todo.title;

            this.edtorTodos = todo;


        },
        edtorTodoed(todo){ //编辑任务成功
            this.edtorTodos = '';
        },
        cancelTodo(todo){  //取消编辑任务

            todo.title = this.beforeTitle;

            this.beforeTitle = '';

            //让div显示出来，input隐藏
            this.edtorTodos = '';
        }
    },

四、记下来是如何保存我的计划，为了防止刷新网页时列表消失

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

    }
}
//取出所有值
var list =store.fetch("wo-de");

除了要这样创建list，还要使用watch监听他

 watch:{
        // list:function () {     //监控list这个属性，当这个属性对应的值发生变化就会执行函数
        //   store.save("wo-de",this.list);
        // }
        list:{
            handler:function(){
                store.save("wo-de",this.list);
            },
            deep:true
        }
    },

五、使用hash进行宣言
点击所有任务时：

点击未完成任务时

点击完成任务时

function watchHashChaange(){
    var hash=window.location.hash.slice(1);
    vm.visibility=hash;
}
watchHashChaange();
window.addEventListener("hashchange",watchHashChaange);

 computed: {
        noCheckeLength: function () {
            return this.list.filter(function (item) {
                return !item.isChecked
            }).length
        },
        filteredList:function(){
            //3种情况
            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](list);
        }
    },