[IMWeb训练营作业]TodoList 20170419

这是第一次写技术博客参与了这个腾讯训练营计划，本来是打算找些时间好好的去学习，发现每天都在加班学习的时间较少，学习的效果不是很好，对VUE掌握的还是不好就去模仿了老师的代码。。。。

javascript代码：

var store = {

    save(key, value) { // 存localstorage

        localStorage.setItem(key, JSON.stringify(value));

    },

    fetch(key) {// 取localstorage

        return JSON.parse(localStorage.getItem(key)) || [];

    }

};

var list = store.fetch('newTodoClass');

var vm = new Vue({

    el: "#todoapp",//挂载元素

    data: {

        list: list,

        todo: '',

        edtorTodos: '',//记录正在编辑的数据

        beforeTitle: '',//记录修改前的title

        visibility: 'all'//通过这个属性筛选数据

    },

    watch: {//监控info这个属性，当这个属性对应的值发生变化，就会执行函数store.save

        list: {

            handler() {

                store.save('newTodoClass', this.list);

            },

            deep: true//深度监控

        }

    },

    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.edtorTodos = todo;

            this.beforeTitle = todo.title;

        },

        edtorTodoed(todo) {

            this.edtorTodos = '';

        },

        cancelTodo(todo) {

            todo.title = this.beforeTitle;

            this.edtorTodos = '';

        }

    },

    directives: {

        "focus": {

            update(el, binding) {

                if (binding.value) {

                    el.focus();

                }

            }

        }

    },

    computed: {

        completed() {

            return this.list.filter(function(item) {

                return !item.isChecked;

            }).length;

        },

        filteredList() {

            var filter = {

                all(list) {

                    return list

                },

                finished(list) {

                    return list.filter(function(item) {

                        return item.isChecked

                    })

                },

                unfinished(list) {

                    return list.filter(function(item) {

                        return !item.isChecked

                    })

                }

            }

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

----------------------

运行效果图：

：

自己还得慢慢去看视频吧 这个demo自己做的很费劲，很慢 慢慢去学吧。。。。。

只要不放弃就好了 相信自己能学会的！！！