Simple Vue But Powerful JS Part 2

继上一篇搭建了这个Todo App的框架之后,我们轻松实现了为App添加一个task,这次需要实现的是对task的编辑,删除,完成等功能。如果你认真看完,你会发现:在Vue中,一切原来那么简单!

编辑一个task

我们之前通过下面的代码将每个task循环出来:

  • {{ task.body }}
  • 有了每个task之后,我们准备实现的是在用户双击task时候,就是双击{{ task.body }}的时候,用户可以对该task进行编辑。实现的思路我大概是这样想的:

    用户双击 --> 拿到task的body部分 --> 删除展示出来的task --> 将task的body部分赋给newTask  --> 回到添加task的流程 
    
    

    考虑到这里,我们就遇到了一个问题,怎么删除task跑出来了,不是在编辑task么?好吧,顺便在这个时候将删除task实现了吧,反正正常的App都会有删除功能,所以现在我们来先实现删除task。

    删除task

    为了更好地看到删除task,我为每个task后面加了一个删除task的小按钮:

    {{ task.body }}
    
    
    
    

    上面这一行就是加了一个x删除小按钮,我们在这里使用Vue的事件监听,当用户点击这个x按钮的时候,我们执行removeTask方法,这个方法接受一个参数,就是task本身。所以在todo.js里面的methods部分加上removeTask:

    removeTask: function(task) {
        this.tasks.$remove(task);
    }
    
    

    有没有感觉非常简单,就是两行代码而已!这里的$remove方法是Vue官方提供的一个删除方法,其实就是使用了js的slice。接受到task之后,然后删除,easy enough。

    在回到前面的编辑task,我们在实现了删除task之后,这个也变得非常容易了。

    完善编辑task

    按照前面的思路,我们首先需要为task的body绑定一个方法:

  • {{ task.body }}
  • 类似的,我们监听用户的双击事件,如果用户双击了该span,我们执行editTask方法。所以,我们来写一下editTask方法:

    editTask: function(task) {
        this.newTask = task.body;
        this.removeTask(task);
        this.$$.newTask.focus();
    },
    
    

    依然是将editTask放在todo.js的methods部分,该方法接受一个参数,就是需要编辑的task自身,然后将task的body部分赋给newTask,删除原来的task,最后就是为newTask输入框获取一下焦点。这里的newTask因为和input输入框进行了数据双向绑定,那么这个时候input输入框就会自动填充task的body数据。像这样:

    完成一个task

    对于一个Todo App,用户新增一个task之后,主要的目的是为了完成这个task。这时候我们就需要用到task的另一个属性了:completed。这是在前面一直都没有提及到的,现在终于要派上用场了。完成一个task,其实就是将completed属性的值设为true,所以我们来实现一下:

    {{ task.body }}
    
    
    
    
    
    

    像删除一个task一样,我在task后面又加了一个打勾的小按钮。用户点击这个按钮的时候,执行toggleTaskCompletion方法,为什么叫toggleTaskCompletion而不叫completeTask呢,因为考虑到用户在点完成之后,有可能反悔了,当他再次点击的时候,task又回到了未完成的状态。所以上代码吧:


    toggleTaskCompletion: function(task) { task.completed = ! task.completed; },

    这个方法中,我们只是将task中的completed属性设置为它的相反值,用户点击一次,这个值就改变一次。刚写完这个方法,你可能会迫不及待去点击完成按钮,但是这个时候貌似没有什么效果,但是chrome的console又没有报错,这是怎么回事?

    其实答案就是:这段代码确实正确的执行了,只是我们在展示task的时候没有根据task的completed状态来筛选认为而已。

    所以,为了实现这一功能,我们进而引入Vuejs的filters部分。

    实现完成task与未完成的task分离

    在实现之前,我们不妨用一个区域来展示完成的task,一个区域来展示未完成的task,所以跟展示task时候很相似:




    Tasks ({{ tasks.length }})

    1. {{ task.body }}

    Completed

    1. {{ task.body }}

    我们在上面用两种方式来实现了Vuejs的filter,一个是filterBy true in completed,这是说只要completed属性为true的task,另一个就是inProcess,这个就需要我们自己来实现一下:


    data: { tasks: [], newTask: '' }, filters: { inProcess: function(tasks) { return tasks.filter(function(task){ return ! task.completed; }); } },

    上面的代码就是一个简单的filter实现,return ! task.completed;的意思是返回task.completed的值为false的task。

    这里我们就简单的实现了完成任务了:

    你可能感兴趣的:(vue.js,javascript)