00:00
好,现在我们要做的第一件事情就是什么呢?我们要来点儿数据,并且这个数据可以在列表里边展示出来。好,那该怎么做呢?呃,把这个先关掉啊,这个也关掉,这些东西呢,我们都把它关掉,全都不要了,重新打开我的APP。打开我的这个图,我们来看一下啊。我有一些数据,这个数据啊,最终展示出来的效果啊,可以和这个是类似的效果啊,这是一个列表,列表当中的数据呢,是不固定的。内容不固定,个数不固定,所以说我们应该用一个什么类型的数据,用什么类型的东西来存储,或者用什么类型的容器来存储这些数据呢?对象对象存储一个数据可以。是吧,存储一个再一个,再一个没有问题,那这么多数据个数不固定,我是不是应该采用数组的方式会更好一些吧,所以我们要做的第一件事情啊,是要。在APP组件里边啊,这个位置。我们先分析一下,就是说数据应该用什么呢?数组来存储,还有我们再来看这里边这个数据有可能选中,有可能不选中,内容可能不一样,那这样来看的话,当前一个数据里边,它的内容应该存在,它的选中的效果应该存在,是不是,那就说我应该用一个什么样的容器来存储当前的一个数据呢?
01:18
那最好的方式应该是对象,一个对象里边可以存储一个属性,这个属性存储内容,可以再来一个属性,存储它的选中状态是不是?当然既然用对象了,我们可以再加上一个什么呢?ID好,那这个数据呢,我们也能确定下来,是说数据应该用数来存储,然后数组中的每个数据都是什么呢?一个对象,然后呢,对象中应该有几个属性呢?三个属性。那这样来看的话,应该有ID是吧,我用ID啊,还有什么呢?Title title存储内容,再来一个ACO。Is completed,那用它来存储它的小众状态,好,这个我们也分析出来了,下一个我们要分析的是什么呢?就是将来我的这些数据是不是我的列表数据,肯定要在这列表的里边去展示出来,那我的数据呢,可能在文本框里边输入的时候呢,还可以进行一个什么操作,添加操作。
02:18
那就问题来了啊。我们来看hide组件当中的数据。还有list里边可以操作数据,Item当中要展示数据,将来我的组件里边还要对我的数据做全选,全部选操作,所以说四个组件都有可能对我的数据进行操作,那这样来看的话,我们下一个要确定的事情是什么呢?就是数据应该定义在哪里。是不是我们来看这四个组件都是我的APP点六的子集组件,所以说现在来看的话,最好的方式应该是把数据。把数据暂且定义在什么呢?我的app.view负极组件,因为负极组件里边数据子集组件要想使用可以直接进行传递,非常的方便。好,那既然这个事情已经确定下来了,下一步咱们应该来数据了啊,那我简单一点,直接来一个set up,注意啊,已经是三的方式了啊。
03:17
Return括号。然后呢,在这个里边,我们要定义一个数组数据,那我就采用,那数组也是对象嘛,是不是我就采用cost。然后state等于re的方式。注意啊,上边要引入啊这的方式,我给他一个对象,对象里边我来一个todos,一个什么呢?数组,数组里边的每一个数据都是一个对象,有ID,比如说是E,再来一个title,比如说是一个奔驰,好再来一个什么呢?Is Co。Is completed,然后给他一个什么呢?False吧,False代表就是没有被选中啊,Is completed。
04:00
那我这块再来一个逗号,咔咔来两个。二三,那这个比如说是宝马,好再来一个奥迪,OK,这个位置我给它改成一个处默认呢,两个没有选中,一个被选中了,好那我这个数据又定出来了,定义出来之后,最终应该说是当前这个数据在哪用呢?并不是在我APP里边直接使用,而是在我的list的里边去使用,那list的组件里边有一个item在这呢啊。有一个item,一个item代表一个数据或者说一项,那应该有多个item,那我肯定要进行遍历,对不对,好在这之前我们再来看啊。Relative。返回来的是一个stay对象。对不对,那我最终在这个例子里边,我要传递的是一个什么呢?土DOS的这么一个数据。那我就得写成state.to当然前提是我下边得把这个state给它反出来。State得给它反出来,我觉得麻烦,如果说我上边直接能够使用土DOS,那不是更香吗?是不是?哎,那我们该怎么办呢?其实这个位置的话,我们可以直接使用这个方式,点点点to re e FS的方式。
05:10
然后把当前这个state给它放进来,然后并且做一个结构,是吧,State放进来变成if的对象,并且再把里边的数据做一个结构,那我上边可以直接使用to。啊,还有一个问题。我当前这个土豆S里边每一个术语都是一个对象,我对象里边现在有三个属性。我得需要控制,将来别人去修改我数据的时候,只能控制我这三个属性,不能有其他的属性,那我怎么办?我是不是可以采用接口的方式来约束我数组里边的每个数据吧,所以说啊,这样。我们在这个位置。做件什么事情呢?定义一个接口干嘛约束我的这个的这个数据类型,那就直接来一个interface,比如说叫什么呢?叫做呃,Todo。好,我这块定义一个接口叫todo todo里边这个对象当中应该有ID,并且是一个数字类型,那还应该有什么呢?开头它应该是一个字串类型,它应该有个is Co is complete,它应该是一个Bo类型,那我这是不是就定一个接口吧,但是这个接口只是限制我当前这个对象是吧?或者说约束我当前这个对象的类型。
06:25
那而这个state是一个什么数组?所以说我可以在react这个位置给他来一个泛型,泛型当中我写上一个什么todo,并且告诉他这是一个数组,而且state是一个对象,所以说啊,我来用泛行对象的方式在里边去约束以对象,这个对象里边的数据应该是一个什么呢?Todo,啊,Todo的数组。是吧,当然这个位置我给他来一个土DOS啊,告诉他你这里边儿这个土DOS是一个什么类型的,是一个。对象格式的这么一个数组是不是?哎,好,这是一个数组是吧,里边的每一个对象都遵循我的这个接口,是这个意思啊,好,当然了,有可能我定义的接口将来在其他的文件里边或者组件当中你会需要,所以说我会把它剪切出来。
07:10
找到我当前的src里边来一个什么呢?叫TYPS,并且在里边来一个文件叫TODo.TS。好,我把它丢进来,并且要暴露出去X point啊,这样暴露出去就可以了,格式化一下保存,那现在我的APP组件里边要用到这个接口怎么办?引入point括号来一个什么呢?Todo。From点杠这个什么呢。Types下边的todo,它是点S文件啊,注意点TS文件,好这块有一个todo是吧,好我再把它格式化一下,做一个保存。现在呢,我用一个范围接口的方式来约束我的state啊,包括state里边这个数据,OK,那这块呢,咱们就搞定了。搞定了之后,我们再来看我当前的这个土DOS这个数组是不是被我传到list里边去了,那我list里边是不是得需要这个数据吧?好,那我直接找到我的components,找到我的list,然后在这个里边我去接收一下,我要用到这个数据,所以说我要接受pro。
08:12
那我用数组的方式来个todo,那上边这个item应该是每一项我就可以进行遍历,直接来个todo啊,应该是来一个什么呢?V-for等于双引号。里边的每一个数据都是一个todo indexs,然后in当前的todos,并且冒号K等于todo里边的每个ID。好,这样当我再去保存的时候。打开界面,我们再来看一下。啊,注意这是咱们的是不是。哎,这是咱们的,诶这个不是咱们,这是咱们的,然后再去刷新一下。现在这是有三个数据的,没有错误是吧,好注意啊,比如说我现在在APP这个里边,我再来一个数据。当然这个是四。我已保存。咱们再看。是不是就四个数据吧,说明没有问题啊,当然我把它删掉。好,那我下一步要做的事情是什么呢?例四的组件里边去遍历item,并且item当中需要显示我数据的名字,所以说我会把什么呢?Todo给它传递过去。
09:09
好,Todo这个对象传递过来之后,注意在item组件里边我也要用到,所以说我在这去接受。那我当前这个todo是一个什么类型呢?是一个object类型,但是我需要把它转一下,通过这种方式可以把它强制转换成todo的类型啊,这个是函数,注意啊,这个是object啊,应该是咱们这块有个回调嘛,是吧,是函数。函数返回的是什么呢?Todo类型的好,那我这边需要todo怎么办呢?那我这个位置去引入接口啊,Point,再来里边来个todo from。点点杠找到这里边types找到这个文件,OK搞定,因为这个todo是吧,是由我这个泛型啊,由我这个接口来约束的,所以说这里边不会出现什么问题的啊,那好,那我上边这个这个位置,这个位置我就可以直接写成todo,点什么呢?title.title t。
10:09
格式化一下,做一个保存,现在我们打开界面看一下效果啊。刷新一下,大家看数据就有了,是不是很轻松的就搞定了啊?当然它有没有被选中呢?暂且我可以把这个位置摆上一个V杠,Model等于to度点,里边应该有什么呢?应该有个a cup。Comp complete,保存一下。大家看一下这个是被选中的啊,刚刚咱们做的事情是什么呢?哎,把这个数据定义出来,用泛型泛型啊,用这个接口的方式啊,用泛型接口的方式来约束我的state,包括里边的这个数据啊,然后呢,并且把当前的这个数据传递到我的list组件当中,在list的组件里边做一个便利操作,便利完之后,因为item组件里边需要我当前这个对象当中数据再通过这个什么呢?强制。
11:01
啊数,呃,这个是什么呢?通过这种冒号的方式是吧,把数据传到我的item当中来啊OK。
我来说两句