静态页面

先来实现静态页面，再考虑动态页面
在这里插入图片描述
组件拆分

说明(实际的组件名不是和下面一样的):

Search组件就是上面的那个搜索框
List组件就是列表
ListItem组件:组件的每一项
Buttom组件:就是底下的哪些东西
抽象一下

接下来是实现逻辑
app.vue

<template>
   <div id="root">
     <div class="todo-container">
   	<div class="todo-wrap">
   	  <MyHeader/>
        <MyList/>
        <MyFooter/>
   	</div>
     </div>
   </div>

</template>

<script>
   import MyHeader from './components/MyHeader'
   import MyList from './components/MyList'
   import MyFooter from './components/MyFooter.vue'

   export default {
   	name:'App',
   	components:{MyHeader,MyList,MyFooter},
   }
</script>

<style>
   /*base*/
   body {
     background: #fff;
   }

   .btn {
     display: inline-block;
     padding: 4px 12px;
     margin-bottom: 0;
     font-size: 14px;
     line-height: 20px;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     border-radius: 4px;
   }

   .btn-danger {
     color: #fff;
     background-color: #da4f49;
     border: 1px solid #bd362f;
   }

   .btn-danger:hover {
     color: #fff;
     background-color: #bd362f;
   }

   .btn:focus {
     outline: none;
   }

   .todo-container {
     width: 600px;
     margin: 0 auto;
   }
   .todo-container .todo-wrap {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
   }
</style>

MyHeader.vue

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
	 </div>
</template>

<style>
   /*header*/
	.todo-header input {
	  width: 560px;
	  height: 28px;
	  font-size: 14px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  padding: 4px 7px;
	}

	.todo-header input:focus {
	  outline: none;
	  border-color: rgba(82, 168, 236, 0.8);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>

MyList.vue

<template>
	<ul class="todo-main">
		<!--当时我写到这里的时候想用v-for去遍历数据，这样我就不用写<MyItem/>了-->
		<MyItem/>
	</ul>
</template>

<style>
  	/*list*/
	.todo-main {
	  margin-left: 0px;
	  border: 1px solid #ddd;
	  border-radius: 2px;
	  padding: 0px;
	}

	.todo-empty {
	  height: 40px;
	  line-height: 40px;
	  border: 1px solid #ddd;
	  border-radius: 2px;
	  padding-left: 5px;
	  margin-top: 10px;
	} 
</style>

MyItem.vue

<template>
	<li>
		 <label>
				<input type="checkbox"/>
				<span>xxxxx</span>
		 </label>
			  <button class="btn btn-danger" style="display:none">删除</button>
	</li>
</template>

<style>
	/*item*/
	li {
	  list-style: none;
	  height: 36px;
	  line-height: 36px;
	  padding: 0 5px;
	  border-bottom: 1px solid #ddd;
	}

	li label {
	  float: left;
	  cursor: pointer;
	}

	li label li input {
	  vertical-align: middle;
	  margin-right: 6px;
	  position: relative;
	  top: -1px;
	}

	li button {
	  float: right;
	  display: none;
	  margin-top: 3px;
	}

	li:before {
	  content: initial;
	}

	li:last-child {
	  border-bottom: none;
	}   
</style>