Vue | TodoList 案例【完整过程】_vue todolist案例

实现静态组件

拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

• 创建组件
  

• 在App.vue 里引入组件并注册组件
  

因为item 是在List 里面的，所以要在list 里面 引入 item

• 然后将静态页面都复制到App.vue 里面，template里面放的是html中的结构，style里面放的是样式
• 读代码，分析结构
• 开始拆分复制过来的html结构
  把App.vue里的头部结构拿走，然后立即在App.vue里面写上<MyHeader/>，在这里占位，然后去MyHeader.vue里面的template结构里粘贴头部结构
  以此类推Footer，list，item
  
• 开始拆分复制过来的css结构
  看注释，base是公共区域的，放在App.vue里面，然后把Header，Footer，List，Item分别拿到放到组件里面，然后加上scoped样式
  

展示动态数据

• 考虑数据的类型，名称，以及怎么存放
  这里是todo案例，包含你要做的事情，是否完成，所以用对象来包裹最好，每一件事情item都是一个对象，所有事情list用数组来存放

• 数据存放在哪个组件
  这里是列表，所以存放在List里面