Vue2学习day05—Todo-list案例

Vue2学习day05—Todo-list案例

本篇博客为跟着尚硅谷Vue课程做的Todo-list案例，目的是了解熟悉组件化编码流程
开始之前先对组件化编码流程做下说明：

• 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
• 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
  1).一个组件在用：放在组件自身即可。
  2). 一些组件在用：放在他们共同的父组件上（状态提升）。
• 实现交互：从绑定事件开始。

拆分静态组件

首先我们来完成静态组件先来分析下页面

经过分析我们可建立如下项目组件结构：

静态页面实现

各组件页面静态代码如下

• TodoHeader.vue

  <template>
    <div class="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  </template>
  
  <script>
      export default {
        
          name:'TodoHeader',
          
      }
  </script>
  <style scoped>
      /*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>
  

• TodoItem.vue

  <template>
    <li>
      <label>
          <input type="checkbox"/>
          <span>xxxxx</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
  </template>
  
  <script>
      export default {
        
          name:'TodoItem',
      }
  </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>
  

• TodoList.vue

  <template>
    <ul class="todo-main">
        <TodoItem />