【IMMVWeb训练营作业】使用Vue2.x生成简易的todoList

1.命令
使用的是Vue的脚手架，
vue init webpack
cd immv
npm install
2.在todoList.vue中实现组件
没有完全按照视频的样式，具体实现了大部分功能

<template>  <div class="todoList">     <h1>添加任务：</h1>    <input type="text" placeholder="添加任务" v-model="content" @keyup.enter="addList">      <span v-show="list.length == 0 ">现在还没有任务</span>      <span v-show="list.length > 0 ">当前有{{mission}}任务没有处理，有{{list.length}}条任务</span>      <ul class="list">        <li    v-for=" (item ,index) in  list ">          <div class="cell" >            <span v-bind:class="{del:item.isDone}" @dblclick="editor(index)" v-show="!item.isEd">{{item.title}}</span>            <button @click="delist(index)">已完成</button>          </div>           <input v-focus v-show="item.isEd" v-model="item.title" @keyup.enter="edtDone(item)" @keyup.esc="cancel(item)">        </li>      </ul>  </div></template><style>.todoList{  display: flex;  justify-content: center;  flex-direction:column;}  .content{    display: flex;    justify-content: center;    flex-direction:column;  }  .list{    display: flex;    justify-content: center;    flex-direction:column;    list-style:none;  }  .del{    background-color:yellow;  }</style><script>  export default {    name: 'todoList',    data () {      return {        list:[],        content:'',        history:'',      }    },    methods:{      addList:function(){      //没有按照课程上面的使用当独的标志位。        var data ={ title:this.content ,isDone:false ,isEd:false};               this.list.push(data);             },      delist:function(index){       var val = this.list[index]        val.isDone = true ;      },      //这个地方可以不使用index,直接传入item ,修改属性即可，只是用于测试使用了INDEX      editor:function(index){        console.log(index)           var val = this.list[index];        this.history=val.title;        val.isEd=true      },      edtDone:function(cell){        this.history =''        cell.isEd =false;      },      cancel: function (cell) {        cell.title = this.history ;        this.history ='';        cell.isEd =false;      }    },    computed:{      mission:function(){        return this.list.filter(function(item){          return !item.isDone        }).length      }    },    directives:{      focus:{        update: function (el,binding) {                     el.focus()                  }      }    }  }</script>

---

效果图如下：
1.主界面

2.添加任务

3.已完成任务


修改当前未完成任务，同时已完成任务背景变黄
4.修改任务名称