TodoList案例
组件化编码流程（通用）
1.实现静态组件：抽取组件，使用组件实现静态页面效果
静态分析
1.分别创建这四个组件，并在App.vue中引入
注意不要和html标签名冲突
2.将现成的html、css引入到App.vue的template和style当中。
3.把组件相应地方剪切走，将组件标签粘贴回来。
4.把刚才剪切的结构粘贴到对应组件当中。
其中MyItem在MyList里面
5.关于样式，base放在App.vue中，header放在MyHeader.vue中，其余类似操作，并添加scoped
初始化列表
2.展示动态数据：
2.1. 数据的类型、名称是什么？ 数据动态显示选用数组存储对象的形式。
2.2. 数据保存在哪个组件？谁用给谁（item给list）
一堆数据用数组，每个数据的属性太多了用对象。
在list当中写入数组数据todos
其中done标识着这个item完成没完成。
下一步根据数据的多少在template中写标签（其实只需要写一个标签，使用v-for遍历即可）
设置key 为id，不用v-for中的index了
不仅要根据数据的数量去遍历item，还要将每一条的具体信息对象传给item，所以还需要传入这个todoObj
注意不能直接传，需要加冒号变成表达式，否则传的只是一个字符串
在item中接收并打印，效果如下
注意在template当中用插值语法写入接收来的变量
如何让一个标签动态地拥有某一个属性
只需要改为属性中的done值即可
添加
1.找到输入框，绑定键盘事件，且需求是按下回车再走逻辑，
所以@keyup再加上修饰符enter，并且给一个回调的名字add，暂且定义为打印用户输入
那么如何获得用户的输入呢？
第一个办法就是借助时间对象或许发生事件的元素的值
还有一个办法使用v-model双向数据绑定，把输入的东西给他绑定到‘title’上，这就要求需要配置data，里面需要有这个title，且使用的时候需要this.title。
此时有了名字还不能直接添加，因为需要将其包装成一个对象才可以添加（单机版，没有数据库）
uuid：生成全球唯一的字符串，使用这个来充当id（数据库可以自增，这里不使用数据库）
但是因为uuid这个库太大了，所以使用他的变种nanoid。
安装：
调用方法：
此时需要将header中的输入数据传入到list当中，但是这两个组件是兄弟关系并非父子关系。（消息订阅、全局事件总线可以解决，但是这些日后再讲），下面给出一种解决办法，将todos交给这两个兄弟共同的父亲App，当list需要展示的时候就交给list，Header里面输入的数据交给父组件里的todos。
todos放在App ：
给List展示：（注意不要忘记加冒号，编程表达式）父到子
记得list接收
子到父
在App里定义一个receive函数（方法），并且传给header，header调用这个方法
receive换名成addTodo
加上非空判断和输入后置空操作，去掉前后空格
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/99423.html
![SQL Serve [SQL Server无法连接到服务器]标题: 连接到服务器-无法连接到。 ---解决方法](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading-480x300.gif)
