Vue 组件化编程

组件化编码流程 案例演示

• 实现静态组件: 抽取组件,使用组件实现静态页面效果

  • 把js剔除,先保证页面正常的显示效果(比如css正常)

• 展示动态数据

  • 数据的类型,名称是什么
  • 数据保存在哪个组件

• 交互: 从绑定事件监听开始

• "todo.png"页面组件化结构分析: 三个大组件,再嵌套子组件

- input框 可以命名为'MyHeader'组件(若命名为'Header',就和html <header>标签冲突)

- 备忘录一系列动作,可以命名为'MyList'组件

  - 每一个列表项,可以命名为'MyItem'组件

- 已/未完成,可以命名为'MyFooter'组件

• 划分基本的组件结构

- components目录下,新建四个组件
  
  - MyHeader.vue
  - MyList.vue
  - MyItem.vue
  - MyFooter.vue

- 每块的内容如下

  <template>
  </template>

  <script>
    export default {
      name:'MyHeader' // 其他组件名称自己填
    }
  </script>

  <style>
  </style>

- 在 App.vue中注册

<template>
  <div id="root">
  
  </div>
</template>

<script>

import MyHeader from'./components/FirstDemo/MyHeader.vue'
import MyList from'./components/FirstDemo/MyList.vue'
import MyFooter from'./components/FirstDemo/MyFooter.vue'

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

• 把整体的html结构拆分后,各个组件代码如下

- 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/FirstDemo/MyHeader.vue'
import MyList from'./components/FirstDemo/MyList.vue'
import MyFooter from'./components/FirstDemo/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>

<script>
  export default {
    name:'MyHeader'
  }
</script>

<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"> 
    <MyItem/>
  </ul>
</template>

<script>
  import MyItem from './MyItem.vue'
  export default {
    name:'MyList',
    components:{MyItem}
  }
</script>

<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>打篮球</span>
    </label>
    <button class="btn btn-danger">删除</button>
  </li>
</template>

<script>
  export default {
    name:'MyItem'
  }
</script>

<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>

- MyFooter.vue

<template>
  <div class="todo-footer">
      <label>
        <input type="checkbox" />
      </label>
      <span>
        <span>已完成1</span><span>/全部3</span>
      </span>
      <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    name:'MyFooter'
  }
</script>

<style>
  /*footer*/
   .todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
   }

   .todo-footer label {
  display: 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>