[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自己做的很费劲，很慢 慢慢去学吧。。。。。
只要不放弃就好了 相信自己能学会的！！！