vue.js实现todomvc---实践学vue(中)

本期教程目标

• 点击x删除任务

• 双击任务对任务进行编辑

• 编辑任务后按enter键或者让输入框失去焦点时会保存编辑的任务。而按esc键时,会撤销编辑。

  
  
  

  Snipaste_2018-01-22_00-03-51.png
  
  

    相信通过上一期的学习,我们对todomvc有一个大概的了解,当然了大伙都知道打打豆豆并不是一个好行为,这一章节,我们有三个目标,都是围绕着修改打打豆豆展开的,最终目标就是让豆豆不被挨打,瞧多么重要的事情,让我们来完成吧。

  目标1:点击x删除某一项任务
  

  要想完成这一目标,我们还是需要从数据驱动来思考。其实上一章节中,我们已经知道,每一个任务,其实都是list数组v-for出来的,所以我们只需要将数组中的数据删除,这样被删除的数据就不能再渲染到视图上,从而实现删除任务的效果。既然有了思路,剩下的就简单很多了。

Snipaste_2018-01-22_00-19-35.png

  通过调试工具我们可以轻松的找到x对应的html结构(这里说个题外的,自己手撸页面的时候发现,跟火狐相比V8引擎是真的快,奈何需要翻墙才能装插件,确实也是真的烦),找到按钮后我们可以通过v-on为按钮添加一个删除事件处理函数。

Snipaste_2018-01-22_00-31-59.png

这个处理函数的伪代码应该是这样的 找到当前item在数组中的位置,然后删除它所以真是代码为

Snipaste_2018-01-22_00-32-08.png

很好这样我们就能完成删除打打豆豆的任务了,非常好!但是堵不如疏,我们更希望的并不是不打豆豆而是将打豆豆的行为变为爱护豆豆的行为,这时候我们就需要进行任务的修改了。

  目标2:修改任务内容

  我们需要的效果是,双击任务,弹出一个输入框,进行输入。为了达到这样的效果,我们需要先将对应的class类名找到,大概效果就是隐藏当前标签,出现一个输入框,猜测下,应该可以通过定位完成,所以我们现在任务标签附近寻找,有无输入框,很但是这里0-06.png](http://upload-images.jianshu.io/upload_images/9947395-75111b289dfd52ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当然了这一步如果没有文档我们只能推测出,修改肯定是在li内的input上,但是很难推测到底是添加或删除那个类名才能实现编辑的效果,索性文档中已经提到了List items should get the class editing when editing and completed when marked as completed
这句话告诉我们,在需要编辑时添加editing类名在li上,而任务完成时,需要添加completed类。这里我们只用得上前半句

Snipaste_2018-01-22_09-30-00.png

Snipaste_2018-01-22_09-31-57.png

  嗯?看起来很美,但是真的没毛病吗?当然是有问题了,这又是一个坑,当时我在写这段代码的时候就自然而然的掉进坑里了,当时花了2个小时才想通为什么错了的原理,希望大伙看了这篇章节,能够轻松跳过这个坑。
  首先我们的思路是将"bianji"这个变量私有到对应的对象中,从而实现双击对应的任务改变对应的视图。但是真的当我们双击时,视图并不会改变,item.bianji的值却实实在在的变为了true。出现这个问题,我的第一反应就是数据没有响应的绑定到视图上,但是相信大伙在刚刚接触vue的时候,总会被响应的数据绑定这句话所震撼,自然而然的想到,在vue中无论什么地方的数据都会响应的绑定到视图中,但是文档中有明确的说明。让我们来看看文档的这一句话

Snipaste_2018-01-22_09-39-22.png

Snipaste_2018-01-22_09-40-00.png

相信大伙看到这里就明白很多了,我们使用上面那种办法,确实是改变了想要改变的数据,但是,item.bianji并没有出现在vue的data函数中,这样无论item.bianji怎样改变,只有当因为别的原因视图更新时,item.bianji的值才会更新到视图上,所以并不能实现双击编辑任务的效果。很好,既然知道是哪里错了,问题就会变得很简单,我们只要想办法将item.编辑加入data中即可,这次我把目标放在了data中的list上,list更新时也会响应到视图中,我们只要能找到双击时对应的item,然后在改变那个item里面的bianji属性即可。具体的代码实现为:

Snipaste_2018-01-22_09-50-32.png

html的结构不用修改,只用在添加任务的时候,加入bianji属性,这样bianji属性就相当于是添加到了data中,此时再改变item.bianji就会产生响应的视图效果。这样我们就达到了,双击鼠标,编辑任务的效果。这里防止新手大伙跳入另一个坑就再多提一句

Snipaste_2018-01-22_09-53-55.png

文档中的这句话告诉我们,在vue实例创造后,动态添加的新属性并不能响应的绑定到视图中。

  目标3:编辑任务后按enter键或者让输入框失去焦点时会保存编辑的任务。而按esc键时,会撤销编辑。

首先,编辑任务后按enter键或者让输入框失去焦点时会保存编辑的任务,这两点都很简单,无非就是给input编辑框绑定两个事件即可。这里没有什么大伙需要注意的坑,代码实现如下:

Snipaste_2018-01-22_10-05-24.png

Snipaste_2018-01-22_10-05-38.png

以上唯一需要注意的点就是:

Snipaste_2018-01-22_10-08-04.png

  之所以能够这么处理,还是因为item.title是data中的东西,双向绑定后,试图影响内存中的数据,所以修改完成后,取消编辑类名editing就可以看到编辑完成的状态,因为data中的数据都是响应的绑定在视图中。
  很好,现在就剩最后一个点了,编辑时按esc键时,会撤销编辑。
  想要实现这样的效果的思路是,双击时将被编辑的任务数据保存起来,如果监听到esc按下,则将保存的值重新赋值给原来的item.title。所以代码实现为:

Snipaste_2018-01-22_10-28-47.png

Snipaste_2018-01-22_10-30-00.png

以上就完成了本章节的所有内容。

• 下节预告:

  
  
  

  Snipaste_2018-01-22_10-31-24.png
• 实现上图中显示未完成任务个数的动态响应
• vue的路由切换
• 以及点击clear completed按钮,清除所有完成任务