案例:实现TodoLis（尚硅谷）

是做完后再记录的，前端我主要是要了解下，所以这里记录的比较浅
由于是做完后记录，所以你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> 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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>    
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

MyList.vue

<template>
	<ul class="todo-main">
		
		<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>    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

MyItem.vue

<template>
	<li>
		 <label>
				<input type="checkbox"/>
				<span>xxxxxspan>
		 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>  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

计划调整，两天更新一次