用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=\" \">ToDoList</label>
                <input type=\"text\" v-model=\"todothing\" @change=\"addlist\" @blur=\"clear\" id=\" \" name=\" \" 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
   	}

})