用vue.js做一个题，如图。帮帮忙，只需要完成前三步就行了。代码加一下注释，我怕我看不懂。

图片说明


<div class="main">
 <h3 class="big-title">添加任务：</h3>
 <input
  placeholder="在此添加任务"
  class="task-input"
  type="text"
  v-model="things"
  @keyup.enter="addTodo"
 />
 <ul class="task-count" v-show="list.length">
  <li>
   {{unCheckedLength}}个任务未完成</li>
  <li class="action">
   <a :class="{active: visibility == 'all'}" href="#all"
rel="external nofollow" >所有任务</a>
   <a :class="{active: visibility ==
'unfinished'}"href="#unfinished" rel="external nofollow"
>未完成任务</a>
   <a :class="{active: visibility ==
'finished'}"href="#finished" rel="external nofollow"
>完成任务</a>
  </li>
 </ul>
 <div class="tasks">
  <span class="no-task-tip"
v-show="!list.length">还没有添加任何任务</span>
  <ul class="todo-list">
   <li class="todo" v-for="item in filteredList"
:class="{completed: item.isChecked,editing:item === editItem}" >
    <div class="view">
     <div class="word">
      <input class="toggle" type="checkbox"
v-model="item.isChecked" >
      <label
@dblclick="editTodo(item)">{{item.title}}</label>
     </div>
     <button class="destroy" type="text"
@click="deleteTodo(item)">×</button>

    </div>
    <input
     v-focus="editItem === item"
     class="edit"
     type="text"
     v-model="item.title"
     @blur="edited"
     @keyup.enter="edited"
     @keyup.esc="cancel(item)"
    />
   </li>
  </ul>
 </div>
</div>

var vm = new Vue({
 el: ".main",
 data: {
  list:list,
  things:"",
  editItem:"",
  beforeTitle:"",
  visibility:"all",
  inputId:"",
 },
 watch:{
  list:{
   handler:function(){
    store.save("todolist",this.list)
   },
   deep:true
  }
 },
 computed:{
  unCheckedLength(){
   return this.list.filter(function(item){
    return item.isChecked == false
   }).length
  },
  filteredList(){  
   return filter[this.visibility] ?
filter[this.visibility](this.list) : list
  }
 },
 methods: {
  addTodo(ev){
   if(this.things !== ""){
    var item = {
     title:this.things,
     isChecked:false,
    }
    this.list.push(item)
   }   
   this.things = "";
  },
  deleteTodo(item){
   var index = this.list.indexOf(item);
   this.list.splice(index,1);
  },
  editTodo(item){
   this.beforeTitle = item.title;
   this.editItem = item
  },
  edited(item){
   this.editItem = ""
  },
  cancel(item){
   item.title = this.beforeTitle;
   this.editItem = "";
   this.beforeTitle = ""
  }
 },
 directives:{
  "focus":{        
   update(el,binding){
    if(binding.value){
     el.focus()
    }

   }
  }
 }
});

http://www.itcode.cc/index.php/89312.html
https://www.cnblogs.com/imzhi/p/vuejs-todolist-demo.html

界面大致相同，在题目基础上，添加了入场动画、出场动画，浮动动画，截图为：
图片说明
以下为代码，直接复制打开即可运行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html {
            background-color: #f3eeee;
        }

        .container {
            margin-top: 100px;
        }

        /*输入框*/
        .text-input {
            width: 400px;
            height: 40px;
            background-color: white;
            font-size: 20px;

        }

        /*去掉圆点*/
        li {
            list-style: none;
        }

        /*美化一下*/
        .todos {
            width: 400px;
            height: 40px;
            border: 1px solid #999;
            background-color: white;
            font-size: 20px;
            padding: 1px;
            text-align: left;
        }

        /*浮动动画*/
        .todos:hover {
            background-color: #d9b1b1;
            transition: all 0.8s ease;
        }

        /*添加动画*/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(60px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }

        /*v-move指的是元素移动时自动添加的类名*/
        .v-move {
            transition: all 0.6s ease;
        }

        .v-leave-active {
            position: absolute;
        }

        .title {
            font-weight: lighter;
            font-size: 60px;
            line-height: 48px;
            color: #c5c1c1;
        }

        /*叉号*/
        .incorrect:before {
            content: '\2716';
            color: #a19798;
            float: right;
            margin-top: 2%;
        }
    </style>
</head>

<body>
    <div class="container">
        <center>
            <div id="app">
                <ul>
                    <li>
                        <!--标题-->
                        <h1 class="title">todos</h1>
                    </li>
                    <!--v-for循环展示每一个todo-->
                    <li> <input type="text" class="text-input" v-model="todo" @keyup.enter="add" /><i
                            class="fa fa-close"></i> </li>
                    <transition-group>
                        <li v-for="(item,i) in todolist" :key="item.id" class="todos">{{item.todo}}
                            <span class="incorrect" @click="del(i)"></span>
                        </li>
                    </transition-group>
                </ul>
            </div>
        </center>
    </div>
    <script>
        var vm = new Vue({
            el: ".container",
            data: {
                todo: "",
                todolist: []
            },
            methods: {
                // 添加方法
                add() {
                    this.todolist.push({
                        id: this.todolist.length,
                        todo: this.todo
                    });
                    this.todo = "";
                },
                // 删除方法
                del(i) {
                    this.todolist.splice(i, 1)
                }
            }
        })
    </script>
</body>

</html>