todo-list案例(一) 静态组件

组件化编码流程：

1. 实现静态组件：拆分组件【按照功能点拆分，命名不要与html元素冲突】，使用组件实现静态页面效果
2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是多个组件在用：
   一个组件在用: 数据存放在组件自身即可
   多个组件在用: 数据存放在共同的父组件上 （状态提升）
3. 实现交互 — 从绑定事件开始

(1). 静态页面（html+css） (2). 拆分组件： a1: 静态组件 (将静态页面中的html和css分别拆到各个对应组件中) 在components文件中分别创建：MyHeader.vue,MyFooter.vue,MyList.vue,MyItem.vue 以及App.vue a2:动态组件：
<— 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.vue'
       import MyList from './components/MyList.vue'
       import MyFooter from './components/MyFooter.vue'
       export default {
           name: 'App',
           components:{
              MyHeader,
              MyList,
              MyFooter
           }
       }
   </script>

   <style>
      /*base*/
      body {
         background-color: #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

<— MyHeader.vue —>

    <template>
       <div class="todo-header">
          <input type="text" placeholder="请输入任务名称，回车确认" />
       </div>
   </template>
   
   <script>
       export default {
           name: 'MyHeader',
       }
   </script>

   <style scoped>
      /*MyHeader*/
      .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,23,0.8);
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,23,0.8);
      }
   </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

<— MyList.vue —>

    <template>
       <ul class="todo-main">
          <MyItem/>
       </ul>
   </template>
   
   <script>
       import MyItem from './components/MyItem.vue'
       export default {
           name: 'MyList',
           components:{
              MyItem
           },
       }
   </script>

   <style scoped>
      /*main*/
      .todo-main {
         margin-left: 0px;
         border: 1px solid #ddd;
         border-radius: 2px;
         paddding: 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
28
29
30
31
32
33

<— MyItem.vue —>

    <template>
       <li>
          <label>
              <input type="checkbox"/>
              <span>xxx</span>
          </label>
          <button class="btn btn-danger">删除</button>
       </li>
   </template>
   
   <script>
       export default {
           name: 'MyItem',
       }
   </script>

   <style scoped>
      /*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

<— MyFooter.vue —>

   <template>
      <div class="todo-footer">
           <label>
               <input type="checkbox" />
           </label> 
           <span>
              <span>已完成0</span> / 全部2
           </span>
           <button class="btn btn-danger">清除已完成任务</button>
      </div>
   </template>
   
   <script>
       export default {
           name: 'MyFooter',
       }
   </script>

   <style scoped>
      /*footer*/
      .todo-footer {
          height: 40px;
          line-height: 40px;
          padding-left: 6px;
          margin-top: 5px;
      }
      .todo-footer label {
          dispaly: inline-block;
          margin-right: 20px;
          cursor: pointer;
      }
      .todo-footer label input {
          position; relative;
          top: -1px;
          vertical-align: middle;
          margin-right: 5px;
      }
      .todo-footer button {
          float: right;
          margin-top: 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