Vue入门练习TodoList

        这两天一直在看Vue，所以打算写个小demo来更快的适应数据驱动视图的这种模式，毫无疑问，TodoList是最经典最棒的一个小项目，先从最简单的部分开始。

        首先需要梳理一下它的思路。大致是由三部分组成:

1. 表单及提交表单内容的按钮
2. 展示的任务列表 
3. 未完成，已完成、 总任务的实时展示数目

先把基本的结构写出来

    
        
        
        
    
    
        
		
        

            
          
                
        
          添加
                
 
            

                
{{ item.message }}
                     
                    
                    
                

            
 
	
 
		
    

       结构已经出来了，然后再一一实现功能

       增加功能：点击添加按钮 获取用户输入的任务，并渲染到列表。

add () {
    this.items.push(
      {
          message: this.value,
          finished:false
          //增加 利用items数组的push()方法，将用户输入的内容添加进来即可.并且每次添加的finished属性对应的值都是false
      }
    )
     this.value = ""
          // 点击完按钮获取内容后，清空表单。方便下次直接输入
}

如图：

增加功能完成，再来添加删除功能

删除功能同样是利用数组的splice()方法，先回忆一下这个方法，他的第一个参数一般为要操作项目对应的数组下标，第二个参数为删除的数量，例如splice（2,0）表示什么也不做，splice(2,1 )表示删除一个数组下标为2的内容，splice（2，,2）表示从数组下标2对应的内容开始，删除两个，即删除下标为2 和下标为3的所对应的内容，splice还可以传第三个参数，即表示向数组中添加的内容，例如splice(2,0,' Mary ' )表示在在下标为2的地方添加一个" Mary"的项目，再例如，splice（2,1，" Mary"）表示删除一个下标为2的项目，并用'Mary'替代它。所以这个方法的功能还是挺强大的。继续实现删除功能

html部分：

   
{{ item.message }}
	删除
        
        
        
        
           
   

js部分：

del(index){
    
   this.items.splice(index,1)
    //index表示相对应的li列表下标，并只删除一个
},

这样删除功能也完成了。

剩余的响应式数据就简单了，首先，所有任务 ： 它对应的就是 this.items.length ; 重要的是去监听已经完成的，这时候需要用到数组的一个方法filter()方法。看一下关于mdn对filter的说明：

filter()方法里面应该是一个回调函数，并且这个回调函数可以选择性的传三个参数，不太清楚的可以自行了解一下filter()方法。

已经完成的，意思就是finished == true 的列表项，这个时候利用filter筛选并返回 finished == true 列表项的长度就是完成的数量。

   //监听事件
computed:{
    
    finished:function(){
		return this.items.filter(function(e){
				return e.finished
		}).length
	},
    // 返回已经完成的数量

    unFinished:function(){
			return this.items.length - this.finished
	}
    //这个时候未完成的数量也可以得到了

}

最后完善一下样式。

因为是使用模块化组件写的，所以对源码有兴趣的可以去我个人Github上下载，或者留言你的邮箱，我私发给你。

如果有不同之处，还希望多多指点。