Vue实现todolist功能

学习感悟：与原生JS不同，Vue完全是数据驱动的一个JS框架，即所有页面的改动，都要考虑如何与数据绑定并且如何去操作数据，从而改变页面的视图。而且Vue是一个MVVM框架。

todolisit实现功能

完成任务的添加 删除 编辑等功能，以及已完成 未完成任务的分开，利用Vue里面的component函数，注册todolist组件，然后在html中引用。

思路：如果页面有动态变化，就要考虑如何去绑定数据。用v-model来进行数据的双向绑定， 列表的数据可以将其存在一个数组中，然后用v-for指令来渲染到

中；此外还用了localStorage来存储输入数据，使得页面刷新时数据依旧存在。

代码如下：

Vue.component("to-do",{
	template:`
        

        

            
        
        

             
             
             
        
        

            

                

                
                

                   {{item.text}}
                
                删除
            
            
 
                
            
            
        
        
没有数据
  
    
	`,
	   data:function(){   //在组件中数据必须是函数
	   	return {
        all:localStorage.todo?JSON.parse(localStorage.todo):[],
        text:"",
        status:"all"
    }
},
    methods:{
        add(){           //输入的文本生成一个对象，方便识别各个文本以及完成状态
            var obj={};
            obj.text=this.text;
            if(!obj.text){
                alert("请输入内容");
                return;
            }
            obj.id=Math.random()+new Date().getTime();//生成随机ID
            obj.state=0;//0表示未完成 1表示已完成
            obj.edit=true;
            this.all.push(obj);
            this.text="";
            localStorage.todo=JSON.stringify(this.all);//将数据变为字符串存储在localstorage中
        },
       changeStatus(val){           //改变全局信息状态
        this.status=val;
       } ,
       changeState(obj){        //改变当前信息状态 
           if(obj.state==0){
            obj.state=1;
           }
           else{
            obj.state=0;
           }
           localStorage.todo=JSON.stringify(this.all);
       },
       del(id){         //删除
                this.all= this.all.filter(function(obj){
                    if(obj.id!=id){
                        return obj;
                    }
                 })
                localStorage.todo=JSON.stringify(this.all);
       },
       edit(item){           //编辑
            item.edit=!item.edit;
            localStorage.todo=JSON.stringify(this.all);
       },
     
    },
    computed:{                                  //此语句尚未完全理解。。。
        datas:function(){              
          return   this.all.filter((obj)=>{     //在all中筛选出obj
               if(this.status=="all")
                {return obj;}
                else{
                    if(this.status==obj.state){
                        return obj;
                    }
                }
            })
        }
    }                                
    
})