Vue（五）——使用脚手架（2）

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

加上非空判断和输入后置空操作，去掉前后空格