这是第一次写技术博客参与了这个腾讯训练营计划，本来是打算找些时间好好的去学习，发现每天都在加班学习的时间较少，学习的效果不是很好，对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自己做的很费劲，很慢 慢慢去学吧。。。。。
只要不放弃就好了 相信自己能学会的！！！
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
