【IMWeb训练营作业】todoList using vuejs [partial]

<div class="main">
<h3 class="big-title">添加任务： </h3>
<input type="text" name="" class="task-input" placeholder="各种任务"
v-on:keyup.enter="addTodo"
v-model = "todo"
/>
<ul class="task-count" v-show="list.length">
<li>
{{ unCheckLength }}个任务没有完成</li>
<li class="action">
<a class="active" href="#">所有任务</a>
<a href="#">未完成的任务</a>
<a href="#">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表： </h3>
<div class="tasks">

<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" v-for="item in list" :class="{completed: item.isChecked, editing: item === edtorTodos}">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.isChecked">
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
<button class="destroy" @click="deleteTodo(item)"></button>
</div>
<input class="edit"
type="text"
v-model="item.title"
v-focus="edtorTodos === item"
@blur="edtorTodoed(item)"
@keyup.enter="edtorTodoed(item)"
@keyup.esc="cancelTodo(item)">
</li>
</ul>
</div>
</div>

var list = [
{
title: "哈哈哈哈哈",
isChecked: false,
edtorTodos: ""
},
{
title: "傻的吗",
isChecked: true,
edtorTodos: ""
}
];

new Vue({
el: ".main",
data: {
list: list,
todo: "",
edtorTodos: '', // 记录编辑框中的信息
beforeTitle:''  // 记录
},
computed: {
unCheckLength: function() {
return this.list.filter(function(item){     // 原生数组下的 filter
return !item.isChecked;
}).length
}
},
methods: {
addTodo: function(ev) {  // ev $event
this.list.push({ // 事件处理函数中的 this 指向根实例
title: this.todo,
isChecked: false
})
this.todo = "";
},
deleteTodo: function(todo) {
var index = this.list.indexOf(todo);
this.list.splice(index, 1);
},
edtorTodo: function(todo) { // 编辑任务
this.beforeTitle = todo.title
this.edtorTodos = todo;
},
edtorTodoed: function(todo) { // 编辑任务成功
this.edtorTodos = '';
},
cancelTodo(todo) {
todo.title = this.beforeTitle;
this.edtorTodos = '';
}
},
directives: {
"focus": {
update(el, binding) {
if (binding.value) {
el.focus();
}
}
}
}
});