用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

 <div id="app">
        <header>
            <section>
                <label for="title">ToDoList</label>
                <input type="text" v-model="todothing" @change="addlist" @blur="clear" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
            </section>
        </header>
        <section>
            <h2 >正在进行 <span id="todocount" >{{todolist.length}}</span></h2>
            <ol id="todolist" class="demo-box">
                <todo-list v-for="(item,index) in todolist" 
                	@addcomplete="addcomplete" @delitem="delitem" 
                	:i="index" :key="index" :item="item" @editcompletes="editcompletes">
                </todo-list>
            </ol>
            <h2>已经完成 <span id="donecount">{{completelist.length}}</span></h2>
            <ul id="donelist"  v-if="completelist.length">
                <done-list v-for="(ite`在这里插入代码片`m,index) in completelist"
                	@deletecompletelist="deletecompletelist" 
                	@removecomplete="removecomplete" @editcomplete="editcomplete" 
                	:item="item" :i="index" :key="index">
                </done-list>  
            </ul>
        </section>
    </div>

js

var todoList={
	template:`
		<li>           
            <input type="checkbox" @click="addto" :checked="false" >
            <p  @click="toggle">{{item}}</p>
            <input class="editer" type="text" v-if="editable" v-model="items" @blur="editcomplete" />
            <a href="###" @click="deletetodolist">-</a>
        </li>	
	`,
	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:`
		<li>                  
            <input type="checkbox" @change="removecomplete" :checked="true" >
            <p @click="toggle">{{item}}</p>
            <input class="editer" type="text" v-if="editable" v-model="items" @blur="editcomplete" />
            <a href="###" @click="deleteCompletelist">-</a>
        </li>
	`,	
	//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
   	}

})