00:00
好,各位同学。那咱们对于子组件而言,看这flower是不是子组件,子组件已经能拿到数据了,那老师问你,那接下来的活是什么,是不是动态的展示数据。对不对。那剩下的活儿不就是动态的展示数据吗?但是咱们的数据格式呢,从来没有用过,咱们看一下这次请求,这块的请求是看不见的。OK吧,就这块咱咱应该知默的数据是看不见请求的,但是呢,老师呢,想带着你们呢,去看一下它的一个数据格式。老师把这个默中的这个这个这个这个flower这个数据我给你捞出来,Ctrl a ctrl c,老师呢,把它呢,我给你找一个网站,记住了啊。你就搜杰森,因为他是个杰森嘛。你就找第一个阶层在线解析,你看这样老师把这个基层往里一扔,咱格式化一下,你看这么看着更好看一些,你看吧。对不就这个工具,它它好处,然后更好看一些,你看嘛。
01:01
对吧,外层是一个数组,数组里面是两个对象,而咱们每一个flower组件身上是不是都有这样的一个对象。对不,那当然那里面是不是有相应的这个其他的东西。对吧,啊好了好了,那这回呢,咱们就得动态的去展示数据了,但是在展示数据之前呢,老师呢,先带你们看一下数据,你得知道谁是谁来。这边是结构,这是结构老师呢,把这个数据呢,我给你找到,你看这啊,咱找一个flower看这。你看他的身上啊,是一个对象,咱给他点开,你看这啊,你看这这个这老师来这吧,都一样啊,这样侧着来。别侧着,侧着还看着不全,你看这样。所以说每一个flower组件的身上是不是有一个对象叫list?对不,你看他有啥有idd就不用说了。一个ID是001,一个ID是002,你再往底下看看,这样。
02:02
他这块有一个数据叫什么叫叫做看先看这叫car list,老师问你,你猜这块是谁的数据。就你咱咱先咱先不说这个big image,你就猜这个car list是谁的数据。是这个轮播图的数据,它这块有三张图。因为老师说过carry这个单词,你遇见了就记住是轮播图,你看这是不是有唯一的轮播图,它有三张图,你看吧,三张图是不是一个数,数组里边是不是三个元素进行变例。咱们再看这块儿呢,有一个叫什么叫name,咱一个一个看吧。先把能找出来先数说啊就开粒子是它是这的数据,你再看啊,来咱给它折上。这块呢,有一个什么叫做妹纸URL。其实以妹纸URL是谁呢?就是这张图,轮模图旁边的这个图。单独的有一张图。OK吗?叫做image URL,其实就是它,你看这块是不是轮播图旁边是不是都有一个单独的一个图,就是它,对不完,你看这这有个叫keyword,叫做关键字。
03:11
你看什么节能补贴,你看哪是关键字。节能补贴你看哪?你看这个图的上面是不是有节能补贴这一块呢?就是关键字了。所以说keywords这个数据是谁用的,是这用。这能跟上吗?对,这能跟上吗?这个老师先给你们说一下,这数据都是谁是谁。OK吧,还有一个name name叫家用电器,你看是谁,是这。对不,Name是在这儿用的。OK吧,再看这叫navy list,叫导航列表,你看navy list里面又是一个数据书,里面有元素,你看叫什么热门。叫什么什么什么大家电,那是哪是顶上这里热门大家电,这不这呢。对不,所以na list对应的是这儿的数据。那还剩下一个叫的list。
04:03
那他是谁?你看全都是图片,就是这些图了。这四个图,你看它这不四个图吗?你看这是不是四个图,这个数组里面分别是这个这个这个这个是不是回首顶上还有个叫B1IMAGE中间这个。OK吗?就是刚刚老师大概说了一下,这个数据是谁对谁的,大概能不能懂,能懂的给老师扣一个六,因为咱们一会儿还会慢慢找的。OK吧,也就说big image对应的是这个大图中间这个大图对不car list对,对应的是轮播。对,不一位置,URL对应的是这个小图片。Keywords对应的是这里面的关键字。还有个叫做na name是这块的名字。以及navy对应的是这。以及还有个叫叫叫叫叫什么瑞对应的是这四张小图片。OK吧,好嘞,那数据都有了,那咱剩下的活是不是就替换数据就完事了,就很简单了。对不,那咱一定要来看这。
05:01
首先说啊,它这里面咱一个搞吧,虽然说他这里是不是有个家用电器。家用电器水是不是就是那个list name,咱刚刚也说了的。对不?那咱们A等会儿倒个车。走哎,删多了啊,那咱们这块搞一下,那这块谁是不是就是咱们那个叫name,咱一个一个搞你看。叫做list their name,那咱们先看一下,你看对不对。对不?一个是家用电器,一个是手机通讯,对不对。它变了,已经变成咱默的数据了,就当做是服务级的数据了。是不是一个叫做家用电器,一个叫做手机通讯,对不?那咱再接着搞搞这个关键字。对不,这是不是有六个关键字,那关键字咱们也搞搞看一下它叫啥来着。叫list.keyword兹便利它,它是个数组。那么是不是一个数组,那数组你不就在微刚放便利嘛,对不就节能补贴,你看看是哪不是这吧,这叫大热门大家电,这不是那个关键字啊,大热门大家电这的吗。
06:07
咱们就是这样搞对吧,先搞这关键词,那咱们找一下咱们关键词不是这啊,不是热门什么大家电看这啊,不是这。对吧,那咱们找一下咱们的那个那个那个关键字往底找找。是不是这儿。对吧,你看什么什么电热水器,这不就这吗?对不,那所以说它是个数组,你这块也得变。所以这块咱们也得便利啊,你得来个啥V-for。对不,它叫叫什么?咱们比如叫keyword,所以这叫index in in谁in咱们那个list.keyord兹它是个数组,数组里面是有元素的。咱们看数组里面的元素是什么,咱们看一下。数组里面的元素很简单了,就是字符串。对不对,是不是就是字符串了,那所以说咱们这儿来个啥叫做K,为什么那这块咱就用一下索引值吧。
07:03
OK吧,因为他没有ID,刚刚你也看见没有ID。对不,那这块呢,老师问这k word啥是不是,每个是不是字符块直接替换就行了。对不,那就叫做keyword。那所以说你这回再看一下,你看是不是替换了。来老师呢,把这给你整下来,你看是不是替换了。对不节能补贴,节能补贴二。空气净化器,空气净化器二,这没问题吧?哎,只是他那以及这块谁是那个大图,就刚刚老师说那叫big image。就是这个这条属于叫big image。这个咱没听看哪个是那个大图,咱得找找它应该是在这个,呃,在这个关键字的下面,对不?那这块是咱刚刚写的这个关键字,咱给他折,那是不是就是它。哎,是不是就是它关键词下面是不是就是底下那个大头对吧,所以得加冒号这块叫什么叫做list。哎,叫做list,点谁是不是点咱们那个叫叫叫啥叫big image吧,我是这么写,是不是忘了,先看有没有图。
08:09
有吧,啊,人家是不是就来了?当然这两张图片是一样的。OK吧,那接下来呢,咱们的。呃,这个轮播咱们也搞搞。对不?这个轮播咱们也搞搞,那轮播是同样的道理,老师先给它折上,你像轮播图使用是不是得分为那三步,第一步in swa引包,第二步,第二步干啥,是不是要有结构,第三步干什么?这图错了吗?没有吧?啊,不对啊,是那个啊,这个大图咱说的是中间的那个对吧?行,其实你放它也行。来老师再看一下结构啊。再瞄一眼。啊,应该是image URL啊,中间那个大图应该是这个图应该是image URL对吧,哎,妹。URL当然你用它用刚刚老师写那个也行,不就两张图片对吧,这咱给它换过来走。
09:05
对吧,哎,这回是对的。那接下来呢,就是咱们这个轮播图了。轮播图这里你想想在轮播图用的时候是有几个步骤。你琢磨琢磨第一步干啥?引包引S外。对不对,老师问你第一步是不是要引那个swaper?第二步引样式,样式咱已经引了,第三步是不是得有结构,第四步是newwap实力。对不,那所以说咱们一个一个来,第一个看这啊,第一个看这。第一步,引包,对不?引入咱们的swaper,那就引。Part。Swaper for谁是不是swaper?SWIP,对不?那第二步引样式咱们是不是已经引了,那第三步你是不是得得得得搞这个结构。对不,那当然咱们找一下咱们轮播图这块老师给他折上。啊,这还有真不能折,这给他折上,咱们找找咱们轮墨图,轮墨图在哪,你看是不是在这。
10:04
那这个结构你应该有点感觉了,这不就是轮波图的那外层的容器吗?每一个Li不就是一张图片吗?这是不是又出现了分页几小点?这又有左右按钮是不是就是这?对不,那当然这个leader咱们得遍历,因为是几张图,是三张图。所以这块得怎么得V-for变力,哎,这能不能跟上。就是这块的是轮播图啊。写下这块水是轮播图的地方,轮波图。到地方。对不,所以这块的力它有多张图片,你得微刚放,那便利谁呢?咱写一下吧,叫做car。Cel完了之后也有索引值,便利谁咱们找便应该是list下的。完list下谁啊?咱们瞄眼是应该是list下的,叫做什么list?
11:00
是哪个呢,是他。对不,它是一个数组,数组里面又有三个对象,每个对象身上是不是有枚体L。这结构能看懂吧。它是一个数组,数组里面有三个对象,也就是说现在咱们便利到这个car,每个都是对象,对象的身上有一个属性叫做image URL。对不,所以这个呢,咱们把这个属性名字给捞走,就给它直接捞走,便利的是list下的它。List下他。对不,那当然你得也有KK他也没有ID。看看有没有ID,有吧,那所以说这块你给来个啥冒号K。等于什么呀?等于croel carous.ad对不?那当然你这个图片地址你是不是得换,换成谁是不换成咱们的这个叫做car.image URL叫car啊O都是怎么写的uell点以妹纸URL对不。
12:03
那结构有了再打是不是得newwap实力了?诶,对不对。就是现在咱们假如说结构已经有了,是不是得得new swap的实例啊,这是不是咱当年的那个swap使用的,呃,那几部。对不,而且咱们当年最先测试的是在哪,是在monkey当中测试。那咱们看一下现在老师在这里在用那个swap实例。对不,那这个咱找一下子吧。就是咱当年那个历史container这不写过吗?不就是他吗。对吧,咱给他折上。对不,咱就直接捞过来了啊,就不再去找官网了。老师呢,还是放在monkey当中,这是啥?是不是咱当年的组件挂载完毕的地方?对吧,老师把它给它放在这儿。但是你要注意啊,你要注意现在的第一个参数是不对的,底下的这些配置对象你可以不用改,但是这个参数可不对。
13:02
因为咱们的这个结构当中是没有这个这个这个ref的。不,你看老师给他提上来啊,咱们的现在这个结构是没有这个ref的。老师往这边给他挪挪。啊,这块老师要给他挪挪,这块呢,也给他挪挪。哎,这块也给他挪挪,呃,这块呢,老师呢,也给他搞一下。哎,走,你看这样,你看这样,老师问你啊,咱的这个容器的最外面有ref没有,而这是咱们超过来的,咱当年的那个螺模图是不是写了。这块可没写。对不?所以咱也给他打个ref,就是REF等于啥等于K。对吧,等于K。那咱获取到这个真实道这块就换成换成坑,但老师想问的是你看啊。咱当年是不是在这儿讲过,放这儿是不是不行。有没有点印象?所以刚刚讲啊,都不是当年是今天,今天咱是不是讲过一次,放在这是不是不行,但是你告诉老师为什么这个在这就行。
14:05
你看这个放在猫题当中就可以。等我是刷新。我单词写没写错。诶,我看单词写没写错,是点mont,单词没写错吧,这是点Dollar re FS,我找一下Dollar re FS。啊,错了,这个这个不是那个容器啊,这个不是那个容器。啊,我说的记住啊,这个不是那个容器啊。哎,看这啊,这不是那个容器是这儿呢啊,折错地儿了是不是这。对不,咱给他打一个RF,这啊是RF这个咱给它叫坑。咱当年啊,你放在monkey当中是不可以的,但你看现在看这。刷新。你看为什么可以了呢。诶,你看啊,走老师刷个新,你看当年的那个案例,就当年那个轮播图,你放在猫当中不行,那为什么这块就可以。
15:07
谁能告诉老师?这块咱得琢磨琢磨,就是当年啊,咱第一次讲轮播图的时候,放在monkey当中是不行的,为什么这个放这就行了。正在做嘛。那老师给你放,这就是当年,也不是当年了,就是第一次书写s WIP wiper的时候。对,不就是第一次。第一次书写swaper的时候。在monkey当中,书写是不可以的。但是为什么现在这里可以了?谁能告诉老师?哎,有的同学说到点上了啊。
16:02
你这块呢,一定要注意一件事。哎,我看你们是开窍了,你看咱当年的那个罗卜图请求是在哪发的?是在monkey当中发的,是在组件的内部发的。而现在咱们的这个flower组件,你看在他的monkey内部我发请求了吗?你看这啊,老师在这我给你写一下子啊,这咱当年第一次数学swap的时候是不可以,但是为什么现在可以,你像。第一次。书写轮波。图的时候。是在当前组件的内部发请求,对不,以及呃,动态的渲染结构。对不对,哎结构那前提是什么前提。至少服务器的数据需要回来。因此当年不行。因此,当年的写法在这儿不行。
17:03
但是为什么说现在的这个组件就行了?你要明白一件事,什么事这次请求的数据不是在flower内部写的。你要你要你要明白啊,这你看咱当年的立色口内栏发请牛是不是在自己的内部请求的,你看是不是在自己的内部的monkey当中写的。对不,而你的flower当中是没有没有这个发请求的这个这个这个步骤。他什么时候发的,它是在home组件挂载完毕之后,他就把是在home当中发。你看吧。是不是在后当中发呢。哎,这个能不能想明白。而且是,你看,而且home组件都已经通过父子组件通信了,那老师问你前提是啥前提父亲是不是已经有数据了,而且把数据还给了谁,还给了咱们的子组件?肺能懂。
18:01
就这个能不能懂,这个能懂,给老师扣一个一。就这个能不能懂这个你一定要注意啊,就是flower这个组件,就是flower flower这个组件。自己。在组件内部是没有发请求的。对不,数据是谁给的?是副组件给的。那所以说在这个组件,你就想想这个组件已经挂载完毕了,啥意思,我数据是父亲给的。而且你父亲给我我的数据,我是不是。动态渲染。渲染完事之后,我是不是执行mon的,所以说在mon之前你结构早已经有了,就这能不能懂。就这里能不能懂,这里一定要注意,这个数据是来源于父亲,父亲早已经把请求发好了,数据早已经给了子组件了,子组件早已经把结构变理完了。
19:03
所以说你可以在这个monkey当中写。有一说一能听懂的给老师扣一个六。你这里一定要想明白。就是这个数据捞的数据不是自己发请求捞的,是父亲给的。在你展示你想在你展示floor之前,数据早已经有了,结构早已经完成了。对不,所以说你可以在monkey当中书写了。就这个能不能懂,能懂的给老师扣一个六。OK,不?对不,所以这块呢,一定要注意啊,那么现在。的这种写法。哎,为什么可以,因为什么,因为数据是因为请求是父亲父组件。
20:03
呃,发的。是负组件。通过shoppers传递过来的。而且结构。结构都已经有了的情况下。执行的谁,Wanted?因此,你可以在这写。OK吧,哎,所以说这个一定要注意。对不好嘞,这是它,那咱们再展示展示哪呢?再展示展示这里,这里面是不是有12345张图。那咱接着来,回到咱这儿啊,回到咱这。那咱们看一下数据啊,看一下数据。你看这。那这里面呢,它咱们先把这四张图先给他展示出来,咱找一下,找一下咱们这个flower你看。有一个叫谁叫做navy啊,不是叫做recommend list,看这叫recommend list,它是一个数组,数组里面有三张,有四张图片的路径。
21:03
这四张图片分别是谁?分别是看四个1234,不带中间的这个。OK吧,那咱们看一下结构。在哪呢,老师给他折上看一下结构看啊。老师呢,先把顶上的这呢,我先给你折上吧,这先给你折上看底下这。叠着的轮播图,老师给你折上了,就把先把没用先折上,看这。看这就看这,你看数数底下是不是有一有二有三有四有五张图对不对。老师问你这里面咱能围缸放?就这块儿咱能围刚放。你看它结构都不一样,你看能不能V杠炮,能还是不能。你自己认认真真的去看看,让老师给你折上。咱能不能V杠放。这五张图能不能V杠放?能不能给个回音儿?就是这五张图能不能V-for去便利?
22:03
你看吧,老师把结构给你折起来。你看能不能V杠号便利。能不能不能对不,所以说咱们这四张图就别围刚放边了,一个一个用就行了,好吧,咱们先看第一张图,老师先给他展开了啊。来把这五张图一个替换,那这个是不是得换成动态的。那这个应该是什么呢?是list。找一下应该是累。这个对象的这个属性啊,这叫啥来着,看一下。叫recommend list,它是一个数组。对不,它是一个数组,数组的第零项是个对象的,那叫啥玩意儿?呃的啊,就是第零项对吧,它不是个对象是不是就完事。对不,那第二张图就是谁,就是他那索引,这应该是几,应该是一。对不?哎,索引值应该是几,应该是一。
23:02
对吧,啊,这块多多了一个src。对不?所以说上下的这个第一张图,第二张图是有的,就是这个这个图和这个图是有的,但中间的这个是个大图,大图咱们说过是用的是哪个数据,用的是不是这个叫做big image。对不说第三个图应该谁写上它冒号。应该叫做list。List下的这个叫big image。对不,那以及底下还有两个图,那这两个图咱就直接复制粘贴了。应该是数组的第二项和第三项。对不,这是第二项,底下这是第三项。对不,哎。就这能不能等能懂吧,所以咱们先看看图片是不是就替换啊走其实都是一样。对不对吧,这个图片老师用的是一样的啊,找你找你没问题没问题,没问题没问题对吧,那以及还有谁,还有这这咱们也得替换什么大热门大家电在哪呢?其实咱们在顶上应该看到过,就在哪老师给你折上就是在顶上这。
24:07
这不这儿吗?这块呢,我记得是有一个叫叫叫这不这的吗,大热门大家电啊,生活电器,厨房电器不就这吗。这块的数据咱们也得替换,那你看这块的结构是不是就可以为刚放对不,那咱只留几个,只留一个。对不好了,那这块呢,咱给力就来个啥,就来个V-for。那这个咱们看它的名字叫啥来着。便利那个数据,看他名字叫啥来着忘了。找一下它应该叫做啊navy list。那位例子是个数组,数组里面每个是个对象,对象是不是里面有个叫test?那岁数这块咱起个名吧,那这块咱叫啥叫做navy。对不?In desk便利谁便利咱们的list下的navy list。对不,那当然你得有K,咱其实刚刚看了他有ID吗?没有没有,咱就index。
25:03
那这里面咱们得用谁,是不用每一个对象的test的属性。对不,那所以这块咱得写成谁,写成咱们的哪位。点NAV那位点test对不,那这样是不是就完事了。对不,那所以说到这儿为止,咱们的home首页就已经搞定了,就这能不能等。能懂的给老师扣一个六。OK吗?比如到现在为止,咱们的后面首页完成了99.9%了。OK吗?O不OK。OK吧,啊,那咱们呢,一会儿呢,还要做一件事,那咱们一会儿回来再说。OK,不?OK吧,啊好嘞,老师呢,先填一下填。
我来说两句