《前端》使用webpack+vue从零开始打造前端项目(2020最新版)八--todolist功能--bilibili-2021年2月16日

项目准备

安装Vetur插件，并做配置、devtool等。

组件拆分之目录结构与框架搭建

 

mainheader组件实现

1、页面显示

2、样式

p34css优化没仔细听

mainTodo组件实现

TodoItem.vue

 

TodoInfo.vue

核心点：父组件向子组件传值

1、数据结构

数组  ，里面放对象

2、框线为实现代码，黄色框线为父组件向子组件传值的代码。

:todo=“item” //绑定item，它会遍历todoData对象；

props:{todo:Object}  //todo的类型是Object

<label for="">{{todo.content}}</label> //label 的值是todo.content，这里的todo其实就是遍历的父组件的todoData。