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

用vue制作一个超市采购清单的相关List

以下是页面代码（html）

    <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>

以下是js代码，默认存在两个已添加清单

        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();
                        }
                    }
                }
            }
        })

以下是本demo的效果图

图一：

图二：