IMWeb训练营作业--VUE练习，ToDoList

<div class="page-top">
<h2>采购清单</h2>
</div>
<div class="main">
<h3 class="big-title">添加采购清单</h3>
<input placeholder="eg:毛巾；tip:+回车添加采购物品" class="task-input" type="text" v-model="todo" v-on:keyup.enter="addTodo">
<h3 class="big-title">采购列表<span>(双击可编辑，esc取消编辑)：</span></h3>
        <ul class="task-count" v-show="list.length">
            <li>{{ noCheckeLength }}个未采购清单</li>
        </ul>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有采购任何物品</span>
<ul class="todo-list">
<li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in list">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.isChecked">
<label @dblclick="edtorTodo(item)">{{ item.title }}</label>
<button class="destroy" @click="deleteTodo()">X</button>
</div>
<input v-foucs="edtorTodos === item" class="edit" type="text" v-model="item.title" @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancelTodo(item)">
</li>
</ul>
</div>
</div>

var list = [
{
title:"酸奶",
isChecked:false//状态false为未选中,未完成
},
{
title:"面包",
isChecked:true//状态true为选中,已完成
}
];

new Vue({
el:".main",
data:{
list:list,
todo:"",
edtorTodos:"",//记录正在编辑的数据
beforeTitle:""//记录正在编辑的数据原title
},
computed:{
noCheckeLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length
}
},
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){//编辑清单
// 编辑清单的时候，纪录一下编辑这条任务的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();
}
}
}
}
})