是做完后再记录的，前端我主要是要了解下，所以这里记录的比较浅
由于是做完后记录，所以你cv后的代码的效果并不一定和我展示的效果图一样

静态页面

先来实现静态页面，再考虑动态页面

组件拆分

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

1. Search组件就是上面的那个搜索框
2. List组件就是列表
3. ListItem组件:组件的每一项
4. 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>  

静态页面完成,明天继续