用vue组件封装todolist

用vue组件封装todolist
css

body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
        header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
        section{margin:0 auto;}
        label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
        header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
        input:focus{outline-width:0}
        h2{position:relative;}
        span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
        ol,ul{padding:0;list-style:none;}
        li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
        p{margin: 0;}
        li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
        li p+input.editer{left:45px;width:70%}
        li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
            padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
        ol li{cursor:move;}
        ul li{border-left: 5px solid #999;opacity: 0.5;}
        li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
        footer{color:#666;font-size:14px;text-align:center;}
        footer a{color:#666;text-decoration:none;color:#999;}
        @media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
        @media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}

html

 

        

            

                ToDoList
                
            
        
        

            
正在进行 {{todolist.length}}
            

                
                
            
            
已经完成 {{completelist.length}}
            

                
                  
            
        
    

js

var todoList={
	template:`
		
           
            
            
{{item}}
            
            -
        
	
	`,
	props:["item","i"],
	data(){
		return{
			editable:false,
			items:this.item
		}
	},
	methods:{
		deletetodolist(){
			this.$emit("delitem",this.i);
		},
		addto(){
			this.$emit("addcomplete",this.i);
		},
		toggle(){
			this.editable=true;
		},
		editcomplete(){
			this.editable=false;
			this.$emit("editcompletes",this.i,this.items)
		}
	}
}
var doneList={
	template:`
		
                  
            
            
{{item}}
            
            -
        
	`,	
	//editable是父元素上的
	props:["item","i"],
	data(){
		return{
			editable:false,
			items:this.item
		}
	},
	methods:{
		removecomplete(){
			this.$emit("removecomplete",this.i)
		},
		deleteCompletelist(){
			this.$emit("deletecompletelist",this.i)
		},
		toggle(){
			this.editable=true;
		},
		editcomplete(){		
			this.editable=false;
			this.$emit("editcomplete",this.i,this.items)
		}
	}
}
const vm = new Vue({
   	el:"#app",
   	data:{   
   		todothing:"",//输入的要做的事
        todolist:[],//要做的代办事件的列表
        i:0,     //记录第几个要编辑         
        completelist:[],//完成的事物   
   	},
   	methods:{
   		//加入代办表
   		addlist(){
   			this.todolist.push(this.todothing);
   		},
   		//加入待办表后清空输入框
        clear(){
        	this.todothing='';
        },
    	//将代办事项加入到已完成列表
        addcomplete(i){
        	console.log("---将代办事项加入到已完成列表");
        	this.completelist.push(this.todolist[i]);
        	this.todolist.splice(i,1);               	
        },
        //在待完成任务列表中移除任务
        delitem(i){
        	console.log("---在待完成任务列表中移除任务")
        	this.todolist.splice(i,1);
        },     
        //在已完成列表中，将任务移到待办事物
        removecomplete(i){
        	this.todolist.push(this.completelist[i]);
            this.completelist.splice(i,1);
        },
        //在已完成列表中移除该任务
        deletecompletelist(i){
        	this.completelist.splice(i,1)
        },
        editcomplete(i,item){
        	this.completelist.splice(i,1,item);        	
        },
        editcompletes(i,item){
        	this.todolist.splice(i,1,item);
        }
   	},
   	components:{
   		todoList,
   		doneList
   	}

})