export default{
name: "app",
data:function() {
return{
todos: store.fetch(),//从当地获得数据
newTodo: '',//中间数据源 于数据框绑定
editedTodo: null, //数据编辑状态
visibility: 'all',//是否已经完成
}},
watch: { //
//监听数据变化并将数据保存
todos: {
deep: true,
handler: store.save
}
},
computed: {
//计算数据的状态
filteredTodos: function () {
return filters[this.visibility](this.todos);
},
remaining: function () {
return filters.active(this.todos).length;
},
allDone: {
get: function () {
return this.remaining === 0;
},
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value;
});
}
}
},
methods: {
pluralize: function (word, count) {
return word + (count === 1 ? '' : 's');
},
addTodo: function () {
//添加数据
var value = this.newTodo && this.newTodo.trim();
if (!value) {
return;
}
this.todos.push({ title: value, completed: false });
this.newTodo = '';
},
removeTodo: function (todo) {
//删除数据
var index = this.todos.indexOf(todo);
this.todos.splice(index, 1);
},
editTodo: function (todo) {
//编辑数据
this.beforeEditCache = todo.title;
this.editedTodo = todo;
},
doneEdit: function (todo) {
//数据编辑完成
if (!this.editedTodo) {
return;
}
this.editedTodo = null;
todo.title = todo.title.trim();
if (!todo.title) {
this.removeTodo(todo);
}
},
cancelEdit: function (todo) {
//取消编辑
this.editedTodo = null;
todo.title = this.beforeEditCache;
},
removeCompleted: function () {
this.todos = filters.active(this.todos);
}
},
directives: {
//获得焦距
'todo-focus': function (el, binding) {
if (binding.value) {
el.focus();
}
}
}
}