项目准备
安装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。