00:00
我们上节课呢,咱们完成了首页分类页面呢,完成了一点点,那这节课呢,咱们就看一下分类页面,咱们先看一下分类页面的一个需求啊呃,分类页面对于一个呃商城来说,分页页面呢,通常分这么几部分,当然咱这少了一个搜索啊,你可以在上边再加一行,加一个搜索都是可以的啊呃,咱们API里边支持这个,呃,去搜索商品,只是咱们这里边没加,那分类页面呢分这么几部分,我把这个。还是放到100%看起来好一些啊,有这边的分类。就是在左侧的一个分类,通常都放在左边,当然页面结构做成大众化的就行啊,那如果是单层分类呢,那你只需要用到里边这一部分就行。OK,单层分类只需要用到这一部分。嗯。这个接口现在又访问慢了,呃,然后呢,这边刷新一下啊。
01:02
先看一下功能,然后呢,这边呢,是相当于选择分类下边的某些商品,分类下边的某些商品,把这些商品选中,然后选中的分类下边这些商品呢,咱们可以排序。可以进行排序,比如说默认排序啊,价格排序啊,评论排序,也就是相当于一个筛选的一个过程。商品你比如说呃,看哪个销量卖的最多,诶买哪个商品对吧,或者是哪个评论最多,咱们买哪个商品,那价格呢,哪个最便宜买哪个,所以呢,找到商品的时候,有这样的一个筛选条件,通过分类找到商品,那如果不选择分类的情况下,那默认的就让他什么所有的商品的第一页对吧,就综合的这样的一个就可以了啊下边菜单其他不变,那咱们写这个页面,咱说了,现在既然用了一个组件库,就VNT,那咱们这个页面呢,咱们所有的组件,咱们都用VT的组件,就一个组件都不给大家写了啊,因为首页上咱们都是手写的组件,如果这个咱们在所有都写的话,那太浪费功夫了,咱也不用把精力放在这个上面,因为组件库有的,咱们就用组件库,OK,当然组件库的所有的样式和属性,你觉得不好的话,你都可以改,比如说像这边的图片的宽度啊高度啊,对吧,这些都是可以改的。
02:26
所有的样式都是可以改的,那首选的在学组件库的时候,首选的是你在使用任何一个组件的时候,那先看一下这个组件给我们提供的对吧?一些属性啊,一些事件呢,一些什么结构啊,按这个里边给我们提供的,我们先使用,如果这里边提供没有的,对吧?因为组件里边要我们往上加GS是很难的,也就是加动态,因为它那个里边是封装死的清懂吧,但是呢,样式改你是可以穿透的,因为我们任何一个系统里边组件,任何一个系统里边组件,你都可以通过F12这个工具选中它,找到它用到哪个类,然后呢,我们起一个比他优先级高的类,把这个类去覆盖,就可以用上,用上你的样式了,对吧?如果属性里边有的直接用属性,属性没有的话,用自己样式就用这种穿透的方式就可以了,但是穿透的方式在组件库里边用的时候。
03:26
别加这个,你要加这个它穿透不了知道吧,那咱们呢,你可以写两个对吧,一个是这样直接带。这个用于穿透的,对吧,Language加这个这样的话,因为组件系统给我们提供的组件,就是组件会给我们提供的组件,那也有什么,也是有一个呃。就是什么需要我们也是单独的一个组件,那也是单独的组件和自己写差不多,如果你不穿透,你加这个的话,你这里边写样式是影响不到其他组件的,只对你自己组件有效,OK,所以不加这个,然后你可以写两个样式,这个呢,其他的不需要穿透的,你写在这里边,防止它感染其他的组件,清楚吗?所以呢,样式是可以加多个的啊,这块加一个,呃,Language that。
04:23
知道这意思吗?比如说这里边组件任何一个想改动对吧,那你就得加这里边儿去穿透。这个呢是自己逐渐的用,防止感染,所以呢,这么去分开写比较好,因为它是支持我们加多个的啊,你还可以加其他的OK。就是如果样式比较多的话,去分一分,样式比较少,就写一个里边就完事了啊OK,然后再防止感染呢,你也可以怎么办呢?在这个地方你起个IID啊,或者是一个类啊,比如CE对不对,然后呢,在这里边,这不SS结构吗?对吧,你比如说在这里边在使用的时候,你都可以井号什么C,然后大括号所有的再写在这里边,比如说Y什么之类的,再往下去写。
05:09
这样的话,只有是这个里层的所有的样式才有效,对吧,也防止感染其他的,不然的话,组件在一个地方用你设置一些样式,那经翅污染其他的一个组件的啊,所以这个是写程序的时候需要注意的一点啊好,那我们看一下,按照刚才咱们这个演示项目里边,演示项里边需要的这些功能,那咱们把这些组件咱们都单独一个一个用一下,单独一一个一个用一下啊,然后咱们把它合到一起,就形成了这个页面。合到一起就形成了这个页面啊,你比如说我们先看一下这个,呃,从上往下看吧,上左右这几个对不对,那像上边这种这个是什么呢?就是我们说的呃,商品的一个什么。
06:01
呃,一个table对吧,Table系统默认给我们的一个table,那像这个table我们想用的话怎么用呢?我们先把这里面组件一个一个用一下啊,那找到这里边的table,你看这个就是我们这里边的一个什么table。Table和table s对吧,然后你可以加在这里边使用,但是咱们现在自动引入了这个你就不用加了,那用的时候呢,就是这样。对吧,Table上边呢,有VGA model对吧,VGA model这样的话我们可以绑定一个直接等于就行了,Action就哪个现在正在活动的,你给一个action就行了,然后setup里边,这边action默认是零,第零个,这样就可以将这个我们给呃访问到,然后呢,这是这个选中的时候,它自己就会加内容,当然我们这里边还可以加加事件啊。GA model是当前选中的,然后再加世界。
07:01
这里边儿你看啊。咱可以点击事件的这个,不然的话,它切换的时候,咱们对应不到程序。触发事件对吧,这个就可以加这个事件,当然你自己加on click点击的时候也是可以的啊,对吧,这块还可以加悬停。准色蒂奇,你看这里边儿有很多,还可以有一些动画的一些效果,OK。滑动切块。你可以按这个几个属性去试一下,也就像下边这种,你看切换一,切换二,切换三,如果太多的话,你看如果太多的是标签有七八个对吧,它自动对吧,可以滚动这边的和这边的是对应的,对吧,滚动导航。挖洞呢,咱们现在使用三个就可以啊,啊来找一个咱们加上。嗯。找一个找一个哪个咱先先用几个这个组件,然后咱们再合到一起啊,不然的话,这些组件直接咱们往项目里边用,你就会觉得不太好用,对不对,那我就按顺序从这往下对吧,这里边其他的先不管,从这往下一个一个去用,你看啊。
08:18
这个V杠,这个它里边需要一个什么,需要一个action,需要一个action,所以呢,我们就得声明一个这个V杠,呃,V-model双向保定的话,咱们可以,呃。不这么做,直接这样,直接说完绑定就行,不一定说非得按组件那个来,然后咱们说他直接就引入进来了,对吧,直接引入进来啊,这会有类型啊。啊,这块有类型,就提示这个咱粘的这个粘的这个问题啊。这块把这个呃拿过来这个组件,然后这个组件呢,我们可以加事件的啊,加事件CK自己去加一个事件点击的时候在这块啊,你比如说咱们加一个呃,Tab c点击的时候,那我们就不用它这个了,它现在默认点击的时候是有这些的,然后呢,咱们可以声明一个action action等等于多少的话,它默认从零开始,012这里边加一个。
09:29
加一个这个,嗯,I'm这块。加个ref,然后我们在这个里边。比如说咱们声明一个action,那就是light action a,呃,Action,然后呢,Ref默认假如说是一这块啊,然后我们只要是将。这个返回去返回,呃,A瑞。
10:13
刷新一下。在家。有个错误啊,这块是这个table这个方法,然后我们再做一个这个方法,点击的时候看这个方法有没有效,OK,点击的时候,嗯,这块来TB。CK。这款costs。等于括号。这块,然后rog。这边打一行一试一下啊。然后我们这块需要返回tab click。
11:02
一行一一行,你看点击的时候,这里边就可以加了,这里边是可以加这个事件的,你可以用他那里边给我们带的这个事件,对吧,然后呢,我们也可以用它,咱们自己去加这个事件都是可以的啊,你比如说他自己这里边咱们看一下用他这种。一定要用手机这个里边给我们提供的,因为在组件库的话,你就得按手势来,他怎么提供的咱们就怎么用,咱只允许咱改的,就是改什么改这个样式啊,其他的呢,基本上不允许我们去改动。看他怎么加这个加怎么事件的,你看他加action是通过这种绑定的这个action对吧,这么去加的,那咱们加的时候呢,尽量自己也别改,咱们也用他的这种这种方式。OK,绑定一个,然后呃。他这里边看一下他的事件你看啊。这个table切换的时候有这个事件对吧?等只是事件名不同,那咱们它相当于在子组件的往外传传递的一个这样事件,所以你自己虽然可以加,但是尽量用这种的事件,咱们叫做呃,咱们自己写的这个事件叫table,呃,Click c I。
12:21
来,改回。诶。就是多了一个。改回了咱们这种这种方式,标签一标签二标签三,你看这个二现在它就有效了,咱自己直接写的那个,你看没有效对吧,现在默认是一刷新一下,你看它就会回到这了,那如果我现在想让它默认是零,那我这块就改成什么,改成零就可以啊。改成零,它默认就是零对吧,内容一内容二用它的事件,你看里边内容一内容二对吧,然后这块也有。
13:00
你看一二可以这样的,呃,去切换OK。组件就这么用比较简单啊,其他的想复杂的你就按手势用行了,这是第一个咱们用的组件,咱们在。看这里边用。嗯。这个咱们来看一下这种菜单,这种菜单呢,其实是两个组件的组合,正常菜单如果不分层的话,咱们用里边的这层就行,咱找一下里边这层导航左部的一个菜单是这里边哪个组件啊。找一下左部的,呃,这个菜单咱们叫做。呃。看是哪个。踱步菜单。分享面板环形,这有个折叠面板,就看看这折叠面板吧,你看就这种折叠的。
14:04
在外头是不是有一个折叠的,所以呢,咱可以先用一下这个折叠的,然后呢,折叠里边咱嵌套那个面板,两个放在一起就可以啊也是。We。标题标签拿过来,然后呢,它有是action name对吧,起了一个这个名字,然后返回action。拿过来折叠面板,咱一个一个用一下,放在它下边。折叠面板这个组件里边有呃,这个选项,标题一,标题二,标题三对吧,这些其他咱们都不用改。这个折叠面板。直接到咱们这块来看一下,你看是不是有这样的折叠面板,咱只要限定一下宽度高度就可以了,对不对,但是这里边咱现在不好用,原因是什么?这个action咱还没有呢,对吧,那咱这块直接声明一个,你看light action等于ref默认,比如说也是零,然后返回这个。
15:10
嗯,AC这个。还有。呃,Model value不是一个函数,这里边还有它还得声明什么model。Model,这没错吧?Action声声明了。还需要。啊,它这里边儿是是个数组,是个数组。里边生命数组是一个一个元素啊。拿过来。手册就得按照手册的里边的要求啊。
16:13
这要等自己的。这星期假。那就可以了,对吧,折叠按照它那个要求,然后折叠里边嵌套,咱们再找下一个组件。嗯,再找下一个组件,然后把它组合在一起就行了,嗯。C那个应该叫CD8S开头这块你看侧边导航就这种看到了吧,也可以,下边有多少个商品呢?带这种徽章的。带那种徽章的背景颜色的这种的只有呃,基础用法,徽章的一个提示切换,切换事件的。这些OK,然后呢,还有。
17:02
这种默认的标签,咱就用默认的这种就行,对吧,第一种那找到这个这个是V杠。这个,然后里边有个又,这里边又来了一个什么,又来一个action对吧,那咱就到时候换其他的一个词吧。把它放到。呃,这个下边你可以放到某一个里边啊,放到某一个里边对吧,比如咱放到第一个里边,这样去加这几个,加这几个选项啊。然后这块咱得改一下啊,Action,比如说叫action k吧。你不能因为咱们上面已经有什么,已经有一个叫action了,这有一个叫action了,对吧,这个action k就行,然后。这块它返回的也是一个零。那咱们就把这个。
18:01
过来。Action k k,然后这块也来一个action。可以。拿过来。你看这里边儿是不是就有这个商品列表了,那个用样式设一下宽度就行了,对吧。可以有这个了,对吧,但是这K应该是小写的K。这个大小。这还。有个错误,大小写要注意啊,因为加va是严格区分大小写的。Active。好。看切换就行了,对吧,然后收起来它就收起来了,然后再切换对吧,一体一样就可以了,这是这两个标签和这个标签用完了,所以你知道对应是哪个标签啊,咱使用的时候就容易了,然后。
19:04
嗯,再往下。这块现在当时需要使用什么,需要使用这个商品的这个。呃,里边这个卡片的部分了,对不对,使用这个卡片的部分,那咱们就看一下有图片有这些对吧,那这个商品卡片咱们就找,呃,这个组件库里边也给我们提供了这种商品卡片。这块有业务组件,业务组件商品卡片,你看是不是就是这种结构啊,对吧,把这个拿过去就行了,然后他需要使用,呃,基础用法,这是基础用法,咱们现在这个用到了哪哪个看一下它的样式啊。流行前面带标签的这个对吧,那咱找一下这个里边带标签的应该是第二个对吧,你可以第三个第二个一起结合都没关系啊,都可以啊,这个标签的第二个,那咱们找一下营销信息的,营销信息的这个组件,然后呢,你看它这里边用插槽的方式可以加标签啊,加什么对不对,那咱所有的还可以加页脚,所有的都可以用插槽,咱就对照下边那个去写就可以啊粘过来这里边有没有声明什么变量。
20:22
没有对吧,粘过来,然后它这块有缩放的图片,用远程的图片,到时候咱改成咱们数据库里的图片就可以了,再粘到这个下边。里边没有用到其他的任何的一个,那我们就看一下这几个卡片。你看这块就有这个卡片了,标签流行对不对,但是其他的咱们先用其他信息看看这里边。再加一个,咱们用插槽可以自己定义这里边的每一个信息,它用到了两个标签,一个是VNCRD,一个用到了什么,只要VN开头的T对吧,也是一个组件,还有vn button,这也是一个组件,它只有组合在这里边,给我们形成一个业务组件,加了这几个,OK,那咱们看一下它的插槽有什么,除了标签,其他每一项咱们都可以去改啊。
21:17
找到这个。手册除了这里边儿,咱们找到它一个插槽,你看啊呃,可以有标签这个,那这些API属性缩放。这个,然后数量价钱等等,你看都有这些东西,字符串类型。直检那插槽呢,这是前面给我们提供的API这个属性,就上面能加的这些属性,对吧,有加这些东西,所有的属性它都有对应的一个插槽,你看都有对应的插槽,你比如说这里边儿咱们现在显示的。呃,到咱们这里边儿。咱们这里边儿看一下,你比如说这个两个。
22:03
呃,这是标签,这是佛角按钮对吧,咱们看需不需要啊,然后还有这个价钱,你看还有这个价钱,那如果这个价钱咱们不想不需要在这块,那我把这价钱去掉,把这价钱去掉,看到了吧,然后按照他这个要求。按照他的要求在这里边啊。插槽你就可以换,因为它每一个部分都给我们留的插槽,我们都可以换啊,你可以通过属性去换,它在盖好之后可以留给我们通过插槽来替换,两种都可以通过属性,通过插槽都可以啊,刚才咱们把价格去掉了,对不对,价格去掉之后,那在看这卡片的时候。在看那卡片的时候,你就会发现。那。这个往下拉一下,你看就没有价钱了,对不对,没有价钱了,那这个价钱这个位置我们就可以自己定义,那我们随便拿过来一个,嗯,在这块吧,你可以按最好是按这个顺序咱们去弄啊,这样的话咱们找也比较好找,那这里边咱们把这个去掉,换成刚才插槽名,因为它是句名插槽里边插槽起了一个这个名字,要我们这里边插入对不对,那我们这块比如说100.00插入这个。
23:20
你看这是不是就100.00,可以用插槽的方式,也可以用属性的方式,两种方式都可以啊,然后你前面你比如说加个这个,咱们换成美元。你看是美元对吧,那假如说你现在觉得这个,因为既然用插槽了,那我们想给它加上颜色,加上颜色对吧,你可以放在这个里边,Span里边,然后你可以加上想要的类和样式插槽嘛,对吧,你比如说颜色color red红色的。你看这个就变成红色了。所以每一部分,假如说用这个组件,每一部它可以预留插槽了,就相当于每一步都可以定义,标题可以定义,描述可以定义,标签可以定义和这边定义按钮可以定义,数量可以定义,那你就每一个都加一个插槽,就一个一个定义了,那讲这个组件的目的就是给大家看一下这个插槽,因为你咱们自己做可以做插槽,用别人的也有这个插槽,好多用系统组件啊,属性完成不了的,比较复杂的,因为属性它只是一个字符串,对吧?如果这一个字符串是一系列标签,那咱们就用插槽就行了啊,当然也得看这个组件给没给我们提供这样的一个插槽,OK,好,那就是这个页面我们需要用到的系统组件就在这了,这么多对吧?那现在咱们就基于这些组件,咱们先把结构咱们先勒出来好吧。
24:50
这块先把这些。呃,到这个位置我先注释一下啊。先注释一下,这样的话,我们这个页面。
25:03
再回到这,诶就干净了,对吧,那这回咱们就开始写这个页面,那我们先布局这个页面上边的商品类型啊,那些东西咱们先留着,OK,那先留着,所以呢,咱这里边需要布局几个地方,比如具具体几个地方,除了最上边和最下边,那中间的内容是不是就主体区域啊,中间内容就主体区域对吧?所以呢,我们div定义一个主体区域,咱们可以起一个呃类或者是ID,比如说主盒子,这个是中间的。这部分中间部分,然后所有的都放在中间部分里边,Div咱放一个什么呢?比如说从上往下咱们先放什么,先放这个呃菜就是排序的or DR排序的这个table。在这块放这个table,先把结构先拿出来啊,那除了放这个呃结构的table之外,咱们是还得放什么,还得放这个左侧的,咱们是还得有一个左侧的一个菜单啊类左侧的菜单,呃菜单菜单菜单左侧的mnu,嗯,然后除了左侧菜单之外,咱们还得放什么,还得放右部的,就是这个商品列表对吧,商品列表。
26:26
在右边咱们会放上这个商品列表啊,商品列表和这个,当然这个位置你可以调一下左部菜单,然后呢,呃,上边的TABLE3个table对不对,然后table外边对吧,咱们再放上什么,再放上这个商品列表,下边这个div来上class商品gods商品list,这个商品列表放在这边。这几个类,然后我们需要按照这个结构,我们是不是需要把CSS这个结构拿过来啊,样式我就以后就不给大家去去写了,因为写样式这个太耽误时间,你只所有的写样式都是这样的,一个一个结构,OK,你就完全按照这个结构去把其他的结构。
27:20
拿过来看啊,这几个名字咱咱得对应上,就按照就按照这个结构对吧,去写这个类,那最外层咱们说了有一个井号,嗯,咱们叫做。这个复制过来复制能保证这个准确性啊,然后里边类有个左菜单。有个左菜单,然后有这个。有这个商品列表,OK。
28:06
当然现在肯定出错,这块是咱们临时粘过来的,就就是为了放在一起粘,比较什么比较方便而已,对不对?这样的结构就有了,然后写样式,这个简布局比较简单,咱就不给大家写了啊,然后这个所有样式咱们就从手册里边开始粘吧啊。这个没有技术含量啊,你自己去去用就行了。结构找到这个。是这个。呃,主体结构。主体结构左菜单就这么几个样式啊,拿过来。转过来。就简单的一个布局,就不不在这给大家耽误时间了,没得必要了啊,然后在这个里边。
29:01
因为现在咱们所有东西都没有放了,对不对,那开始在呃,左部菜单的时候,左部菜单的时候先咱们先把左部菜单放到这块来。那左边菜单呢,咱可以边写就是边挂边挂数据了,边写边挂数据,因为咱们在这个位置。这这个我删掉吧,这放这。那说说过来也行。咱们上节课已经获取了这样的一个数据,对不对,获取所有分类的数据,咱只是打印了清楚吧,获取分类,所有分类可以打印了,那现在咱们需要把这个呃,数据给它放到一个获取到给它放到一个什么,放到一个变量里边就可以了啊。那呃,咱们放到所有的分类,那它起个变量吧,在这块起一个嗯,Cost。
30:01
呃,Cost cat。诶,它有这样提示,那就用这个吧,然后等于re ref对吧,咱们声明这个变量的时候呢,因为它看它是对象呢,还是呃,React对不对,其实呢,你用哪个都行,对吧,如果是数组的话,我们尽量用什么用这个,如果是对象的话,用react这块要区分开啊,这里面每一个我给你写一个,写一个注释吧,不然你不知道这是过去过去。所有分类,获取所有分类上面那几个,就每一个组件对不对,获取所有分类就先不用,咱先删掉,就这个,然后呢,我们将这个,嗯,Cat它里边的V6,它里边的这个,呃,一定因为用if这块,好多人刚开始写程序经常忘什么,经常忘这个,呃微流啊,咱们这块得得把它这个加上,然后。
31:12
它的值等于通过re里边的date里边。你看这个。Date里边。里边儿。呃,过去不是这个。对,这里边儿你看就有这个分类,这个看到了吧。Data里边有这个分类的叫cat YY分类,分类下边这块有分类,然后分类下边咱们再点开,你看有子分类。看到了吧,分类下边的子分类都有这个啊,所以data这里边我们还是这个词叫cat对吧,Cat,呃,IES,咱们就把这个拿过来,然后它有分类和子分类,你看下边的结构就行了,看下边这个结构。
32:09
然后既然已经放到这个词,呃,这个里边了,所有分类放到这里边了,那我们现在挂数据就把这个我们一返回,那现在我们是不是在左菜单里边就可以有这个了,有这个我们按照那个便利,我们先用什么上面一层,我们在便利的时候。是不是先便利外层组件,先便利外层组件对不对,然后呢,再便利里层组件对吧?所以我们在。呃。找到这个组件,咱们是用的是。这个对吧,用这个,所以咱们先把这个拿过来。放到我们左菜单的这个部分,然后呢,咱们一点点去改一下,这里边的所有的地方,我们就先删掉啊,我们先留一个,因为所有东西都是一样的,所有东西都是一样的,留一个就行,OK。
33:12
呃,这个变量咱们起过了,对不对,这个变量咱们起过了,咱先就,呃,不用去管它了。这块,然后呢,里边这块对吧,嗯。你看这个这个属性。对,找一下。咱们用的是这个,再看这标签。折叠面板。这个设置手风琴模式。为什么要设置手风琴模式,手风琴模式就是收缩的,你看其他展开展开这都可以连续展开对不对?咱手机屏幕如果全连续展开不好,那手机模手风琴模式就是同时只有一个能展开,这是手风琴模式,加上这个OK,咱要的就是。
34:05
这个效果,所以这块加一个这个,它就变成什么手风琴模式,一个展开的啊,一个展开,然后这个里边咱们就开始编辑它,贬低它啊,那咱可以把这个敲开。咱说了这个组件都可以敲开嘛,然后咱们使用V。呃,V杠负,V杠负等于呃,It,呃,Itm对吧,呃。逗号index,然后呢,嗯,In在哪个里边呢,在C。GRYYYJRES。咱们是不是返回的是这个变量对吧,CT就分类对吧,然后别忘写什么写KK呢,我们可以是index的,如果你没返回index的,那咱们每个分类ID肯定是不重复的,你都可以用啊,都可以用,嗯,你这块都可以加上这个就可以了。
35:10
点开了啊,那这块现在我们一循环,那都是这个标题,下一个我们就开始什么可以挂数据了。把这个打开。你看因为样式下边我们是加好的,所以在这个里边。你看就都有这个标题了,但只是我们这些。对吧,里边我们还没有任何数据呢,都叫标题一,那这个咱不叫标题一了,按照咱们这个,呃,获取的这个数据。这个他怎么能出现错误呢。这不用点。首次就是数组啊,那我们这块呃。来个来个一。
36:01
来个一试一下。哦,这还真真挺奇怪,手册里边让我们是数组,但是它刚才提示那个数组的有问题啊,对吧,提示数组有问题,Action那不是数组,那我把这个name去掉一下。这个。S去掉。好没问题,我这里边呢,需要把这里边每一部分想用的时候,别忘了这个数据,我们在获取数据的时候,想找数据什么样的,别忘了打印一下啊,不然的话你不知道这个数据的格式,你打印这个就可以,或者是后边的都可以啊,先打印这个。你看咱们就有这个了,他盖的里边对吧,里边有name是不是这个名字,Name是这个名字对吧?然后还有idd肯定是不重复的,对吧,那我们就可以在这里边选中的时,选中的时候在这个位置遍历的时候,标题我们就不叫这个标题了,那就变成什么标题,变成我们的内幕的值就可以啊变成嗯,那响应它能用到变量,别忘了加什么,加这个,加这个itm.name来保存一下。
37:28
你看前延后端数据库对不对,一级分类是不是这些值就有了,对吧,你只要一加上这个呃name就行了,然后呢,它这块加个一什么意思,我们也把它变成名字也变成什么这个IM点呃name吧。它里边自带这个属性,其他就不需要了,对不对,然后呢,在这个里边,那在便利212层的时候。
38:00
你看啊,二层左侧菜单,那我们可以把。这个菜单拿过来到这里边OK。到这来菜单,因为这里边每一部分都是一个菜单,对不对,你可以在每个这里边这个部分,呃,选项的中间这个部分,把整体这个拿过来,如果这么一加。你看一下这么一加的话。你看这里边就有了这个菜单对吧,但这里边你看它有一个V-model这个改变这个键,这个值你看如果里边加的话,我们需要每一个都单独起一个变量名比较麻烦,因为它毕竟需要有一个这样的一个VGA model嘛,对不对,那我们可以干嘛呀,我们可以把它诶放到什么,放到外层。放到外层,这个放到。
39:03
最外层我现在放的是最外层,放到这个外层啊,然后把里边缩进一下,这样的话我就能保证什么这个绑定的变量,因为它这里要求绑定是一个了,而不是循环一次重复的名,因为这个名不能重,对不对,你要重复的话,选中一个其他的这个里边的其他的也是被选中的了,所以呢,在外层加。CTRLS保存了。你看。但是这个标题标题名称比较长,把这个。泪。放在。就比较窄,样式我记得样式可以放在这里边吧。把力加到这个上面,然后把这层去掉。这层去掉缩进一下这块退步一下,还原一下格式啊。
40:07
嗯,好,你这个类里头多了一层那个div啊,把那个去掉就行了,然后你再去调调格式,现在你看就不是每一个类都选中了,它能保证其中只有一个被选中的,你看这有一个被选中的,其他不被选中,看到了吗?只有一个被选中的,这也是有一个这个的原因,因为你不能说要每一个里边都有一个被选中的,对吧,只有一个被选中的就行,所以这一层放到最外边,它是可以这样去,组件之间可以嵌套吗?然后调调这样的格式,那现在咱们就需要编辑这个了,里边每一个标签,那按照我们这里边每个分类,下边不管前沿的前端后端,咱就看前端里边你看还有一个呃什么,还有一个子类对吧,还有个子类,所以在这里边咱们就遍利这个标签,咱可以给它敲开啊,所以你会看到敲开看起来刚开始你写的东西看不舒服,但是你比写的一行强,知道吧,看习惯了这种敲开的格式还是呃比较比较舒服的啊,那在这里边我们就使用V-for去遍历这个。
41:17
然后里程,里程呢,你可以起名叫什么,呃,I,比如说IM2啊,或者什么sub啊,什么东西对吧,你可以都可以I,比如说呃,It em2,这是第二层,三层叫什么什么都可以啊,你也可以根据业务的名称,比如说它这块就叫子层对不对,那我们就可以就叫做sub,便利名是自己建的嘛,对不对,In从itm里边有一个叫看到这个词啊c child。看到了吗?通过这个属性咱们遍历,当然你可以遍历那个ID,如果需要ID的话,可以把ID就是那个index索引编列出来,不需要你可以不变的啊,然后嗯,K,咱们需要把什么得写一个,这个当然没有index的了,那咱可以是sub下边的每一个,它都会有一个,什么都会有一个,呃,ID对吧?K别忘一定要写就行了。
42:15
然后编辑完这个,把这个格式我这边缩一下。哥们说一下是不是就开始起标题了,里程的每一个标题,那里程每一个标题咱们在这块咱们加上呃,比如说叫呃标题sub里边是不是找到一下,看一下里边是有什么,是不是name也是name,所以直接。直接name,诶已保存。你看现在前沿里边区块链人工智能对吧,前端里边这些。是不是这些都有了对吧,选中哪个哪个变其他是排斥的关系,就不选中了。
43:01
是不是这个菜单都写完了,所以用系统里组件两个一循环,诶就搞定了,是不是很方便。这就是把这个组件咱们就放上来了啊,那据现在只是挂数据一点击的时候处理的话,咱们再慢慢处理对吧,挂上这个了,那咱们现在下一步需要呃,什么数据是不是咱们需要把这个导航菜单对吧?导航菜单这个咱们也得去搞定啊。对吧,导航菜单咱们用到这里边的是。这个咱们用完了,那我就把它删掉啊。然后导航菜单这个。呃,导航菜单,那咱们就把这个放到这里边来。标签一标签二标签三对吧,这个用循环吗?当然你也可以写个数组对吧,直接写个数组给他,你看标签一标签二标签三,然后内容就可以了,那咱们这里边不需要这个,咱们就给这块改成咱们自己的,比如说销量呃,销量排行,然后这个位置咱们第二个咱们叫呃什么价格价格。
44:21
销量销量排序。价格排序,然后还有价格排序,还有是呃评论呃评论呃排序,评论排序。对吧,这几部分内容的东西咱就不用管了,这里边咱们不加内容,咱们通过事件咱们自己去获取这样的内容啊,所以呢,咱把这个东西咱把它去掉。内容给它去掉,通过点击的时候,调用这个的时候,调用这个的时候他会怎么的,他会把我们帮我们把这个顺序给我们传进去,OK,传到这里边,到时候咱在这里边接收咱们就可以了,这样的话有销售排行,价格排行,这个就没问题了,你看下边有123对不对,这个就是呃,Table这里边的这个顺序。
45:24
所以你看这个比自己写组件要方便的多,但是呢,如果你觉得样式怎么的不好看的话,你可以怎么的,你可以去改变一下这个样式,OK,那这个方法里边,假如说默认它也会传一个这块啊。这个方法找到这块,这块呢,咱们也可以让它有一个什么index,它默认会传一个index,从这里边打印一下这个index。渠道。你看他这里边把这个index就会把什么,把整个这个给我们传进来。
46:02
有一个你看消重新删删除掉啊。你看这块消失掉,你看你个内幕是零对吧,标题是这个,然后世界是这个,你看价格这个评论这个是把这都都能拿到啊,所以这里边假如说我们想要,呃,他是会把整个组件这个传进来的,假如说我们只要这个呃,Name。你看一。2012对吧,第三个你看你用什么,如果你想用名称,那就是CTRLD删除一下,嗯,这个再复制一下啊要这里边内幕,刚才看到有个title tle。咱咱要这个名称没什么用,一般都要这个索引号啊。你看销量排行价个排行这个,然后咱们现在把这个拿过来了,这里边事件到咱们拿事件获取行了,因为这里边的业务逻辑还是挺复杂的,你得选中分类,然后分类在排行,咱们一点点再去挂那个数据,OK,先把这个都放上去,然后这个商品列表这块,嗯,商品列表的时候呢,咱们现在就用,用什么呢用到。
47:22
嗯。这个组件卡,这个组件。这个。用没有这个组件,但这个组件咱们其他的应该不需要太多的去改,对不对,然后咱需要的就是什么,就是网上循环便利,呃,挂数据就行了,挂数就行了,其他的。假如插槽一个页脚一个,这个页脚咱不需要,咱可以把它去掉。啊,当然那个上面样式这个先不用管啊,你到时候放咱们往上放多个就可以了,商品列表这是一个对吧。
48:07
呃,这块我还得放一个这个光放这一层不行,我先剪切一下,这里边还得来一个div,因为我想做下拉加载更多,下拉加载更多,一定外层有个wiper,那咱就把它当成wiper对吧,然后呢,一定里边得有一个div,一个整体的,一个一个区域的啊,躲开上边的和下边的,所以在这块呢,咱们再来一个西TNT,加上这个才可以啊,才能做下拉加载更多。刷新一下就好了,刷新一下嗯。啊,这块就有这个了,对吧,那标签什么的这些插槽,这个咱们也不需要,这些都不需要,都不需要的话,它这块是不是就空了,就有商品描述对吧?呃和这个东西对吧?然后下边还有一个呃,有数量有商品,呃商品描述,商品描述放着也行,不放这块感觉不太好看,然后呢,呃,商品标题咱们肯定肯定得有,对不对,然后呢,这个图片咱们也需要,图片也需要,然后。
49:17
还需要什么?呃,价格咱们删了对不对,PI这个价格,比如说十块零零。嗯,价格得需要。其他的就不需要了吧,咱们刚才删了一个什么,删了一个呃,标签对不对,Tag标签咱们来一个叫什么,加上这个叫流行。有请这块觉得。嗯,这块你看多了一个流行对吧,在上面加上这个这个就行了,其他的看看什么呢?应该不需要了,然后你就想让它显示多个,想它显示多个这块什么,比如说我们加一个V-four v-four等于呃itin,比如说十呃20个商品,假如说有循环20次,咱现在没挂数据呢。
50:25
你看就就20个对吧,咱把数据一挂就行了,然后咱们做下拉架的工作就行了,现在咱们没有做那个下拉架工作,一共就在20个商品。对吧,这样的样式布局就出来了,咱现在只挂了这个数据,这个咱们不需要数据,只要推拨键切换就行了,那里边呢是需要数据,但现在咱们还不知道什么数据,对吧?那咱们就需要把这个数据呃,做成一个什么,因为像首页上咱是不是也有贴部件呢?得把这个做数据模型,然后呢再一点点的放过来。
51:01
然后再加个加载更多什么的就可以了,也得像一样把这个数据封装成数据模型,而不是直接数据库拿过的数据直接放这块,因为它根据数据模型,根据我们价格,根据我们的评论这排序条件,然后还得根据我们的分类这几个咱们获取的这个数据,所以呢,得咱们得做一个什么,得做一个类似于计算属性的东西,才能把这个数据拿过来啊,不然的话,咱们从数据库里边获取数据没有符合这个要求的,所以呢,得归归类好吧。
我来说两句