Todos案例——业务分析 & 基本布局

业务分析

• todos

• 页面模板

  • 下载项目压缩包后，使用时，需要先安装依赖包
    • todomvc-common/base.css
    • todomvc-app-css/index.css

  npm install
  yarn intall
  

1、直接打开index.html

2、本地启动打开

实现基本布局

• 安装依赖包
• 修改模板的相关标签结构，从而符合JSX语法

yarn add todomvc-common todomvc-app-css

导入样式

import 'todomvc-common/base.css'
import 'todomvc-app-css/index.css'

展示任务列表

• 提供状态数据
• 进行列表填充

新建文件src/views/Todos.js

constructor (props) {
  super(props)
  this.state = {
    todos: [{
      id: 1,
      etitle: '写代码',
      done: false
    }, {
      id: 2,
      etitle: '去K歌',
      done: true
    }]
  }
}

let { todos } = this.state
let todoTags = todos.map(item => (
  <li key={item.id} className={item.done?'completed':''}>
    <div className="view">
      <input className="toggle" type="checkbox"/>
      <label>{item.etitle}</label>
      <button className="destroy"></button>
    </div>
    <input className="edit" />
  </li>
))