00:00
来吧,啊,我来先说一下我们今天要写些什么东西。啊是比较简单的,首先是。这个。这是哪个组件来着,点开是要写啊。叫什么名字?叫需故子吧,对吧,是吧,对前面不有个说吗?啊过子没关系啊,下面啊,这一个组件呢,其实比较复杂,里面整个功能比较多,是这里面最多的一个啊,这个里面呢,还包含了其他的组件,比如说这。这个那也就是我怎么去看它的这个组件的一个组成呢。大家看到整个shop对吧?Shop已经结构整体结构搞好了,下面shop hand是不是也写了,那当前显示的是谁是故这是我们要写的啊,第一个组件。
01:12
在这个里面呢,会用到一些别的,比如说这个。啊,说说这个吧,你看你就知道行是不是就这个。看见了吗?嗯,这个叫cut cut什么意思?购物车control控制啊,翻译过来是购物车控制,实际上就是添加购物项或者减少购物项目。会显示购物项的数量是吧,好这个这个实际上下面这个部分。就这个。啊就他啊当前这个呢,我们称它为show,什么意思。去购物车嘛,啊,购物车还有一个。就这个。
02:01
谁?负的就实物嘛,就显示某一个实物详情。嗯。嗯,这个可以去打开,你也可以打开下面的都可以,对不对,都没有什么太大问题,也可以打开下面的,诶看到有个动画。最近大家注意没有,没注意到啊,再来一个。看有没有啊。玩的太快了,网速太快受不了,就没什么网速太快的问题,就是就真的有时候可以速调,可以往调一下,嗯嗯,太快了啊,等会再后面再看知道一下就行,就是大家经常图片去去哪家的一个效果,实在是对吧。好。那主体是这四个组件,那如果这四个组件写完了,我们再写别的啊,估计也差不多了。就主要的时间呢,还是要大家自己去写啊,啊,我们现在是第四天是吧,嗯,第一个是哪个组件叫good。
03:13
对吧,哎,好几个,一共四个,以及shop故事里面有另外的三个。嗯,我们说的第一个了叫cut,诶,Cut control控制是吧?嗯,下面一个叫super cut。还有一个叫什么,就这些吧,行啊,我们这边组建的样式和那个布局都不需要大家去写啊,主要是写一些交互和一些数据展现。来先来看,其实这个组件我们已经创建了吧。
04:00
把其他都关了,搜索一下啊,什么故事就它呗,对吧,来打开。我们的课间。好,显示二级。下面呢,我们要写的是开发故是吧这样一个组件,这个组件刚才说了是一个相对来说比较复杂的一个组件。它包含了下面的三个CU cut以及什么foot,这里面还会用到一个第三方的库better,啊是一个什么效果呢?这个效果大家应该做过,那是叫什么效果,下门音的效果是吧?啊,就拉拉动,平滑滑动能回弹的效果,嗯。自己写了就没必要了,你说老师我能自己写,为什么要哭呢?自己写的不一定效果足够好,对吧?别人写的一个效率高,再一个效果肯定比你多少好那么一点点。
05:08
对吧。好来在这里面呢,我们先把这个静态模板给它拷过去。到时候我们可以看一下整体的结构啊,把那个样式也拷过去。先看那个界面出来没有啊。能不能看到,但现在界面肯定是个静态界面,你也不能划,也不能点,什么操作都没有,对不对啊,我们先整体看一下这个界面的标签结构啊,样式就不用太看了啊,把它收起来。就是看结合结构其实也非常简单,就是把它看完了,搞这几个部分先看呗,对不对?好,你看整体外围有一个在这外面一个D,这里面有一个故子。
06:07
这里面分为两个div。这两个div对应什么呢?大家看啊,你你说对应什么,大家觉得。是一个什么结构,左右结构对吧,其实大家一看就能看出来啊。看这个对应左边的列表实际上是什么列表菜单,那对应的是实物分类列表,能不能分类列表,而右边的呢,是整个实物的列表,对吧?但实物是列表是嵌在那个那个分类列表里面显示的。你看吧,它标题先是有标题的列表,能看到吧,这个标题就是分类,接着下面分某一个分类标题下面是不是产生实物列表。这实际上需要有两层便利,说白了,需要两层威货。在模板里面遍历不就。
07:02
对吧,啊,这个要搞清楚啊。那后面呢,我们就要去需要去做,那这个它需要一个什么数据显示啊。数据都没有了,我们现在要去动态展现数据,现在写了一个静态的。那首先得想办法去后台获取数据吧,但这个数据是我Mo的数据吧,啊,我这个跟跟Mo没关系,你Mo好了以后就跟这个接口一样。对吧,你就要搞清楚我去请求哪个接口对不?那我首先得想办法去请求哪个X嘛,我看一下。我们找到我们的ACTION4是吧,我们有算是不是用的这个。这一次是用它吗?不是是不是用它呀。对吧,好,那你有没。来看一下C。把它呢,那也就是说我们要想办法在我们的组件里面触发他的马。
08:02
非常简单,在哪写赶紧说。哪个方法里面写又咋的啦,在哪个方法面写忙问题的你得搜一下,告诉我,我去写了一个方法,不然的话我都不知道在哪写在哪里啊,对吧,在盲里面写,接着写什么this多了福斯多叠Dis派CH括号。是吧,需要踩开什么,不需要不需要对吧,所以。就可以了,那这一步做完以后,你最好的方式是应该先去检查一下啊,数据有没有得到,是不是这概念,嗯,打开VX,打开good有没有。是不有啊,一共有几个分类九个,那不同分类下面的食物的数量就不太一样了,对吧,跟着吧,那下面我干嘛去,是不是读数据,刚才不是获取数据了吗?下面是要读,因为数据是存在state里面的,下面要想办法去读套路啊,就是套路感特别强,对吧?好,那我应该把它去定义哪个配置啊computed。
09:31
这吧,点点点map state。名字。啊,这个地方啊是名字,其实啊应该是用它吧,因为这个名字已经安了,应该是用的这个名字。那么呢,我就不去看那个state了啊,好啊,其实你通过这个是不是也能看到是固执。能看到吧。好,下一步干嘛去?显示啊,对不对,数据都已经有了。
10:02
那我怎么这样,怎么证明我的数据已经有了,我现在怎么看。我现在是需要组件里面已经有这个数据了。说白了,我在用前,我得先确保它有了呀。我怎么看呢?告诉我看他吗?刚刚这个不用看,这个是说state里面,我现在是要看组件里面有没有那个估值。你说看什么剧?我干嘛去切换到哪去左边,对呀,你就告诉我,你说切换到左边我就知道,你肯定知道了行。那我们把它打开,找到我们的这一个shop啊,找到我们里面shop里面的shop裤子。对吧,这不有了吗。能看到吧,这不得到了一个估值吗?能看到这一定要知道啊,你在用之前,如果你谨慎一点,你就看一下,其实你要写熟练了,你看不看都没关系。
11:04
这不是说咱们不太熟练吗?不太熟练就谨慎一点。或者说大家出了问题,知道哪些地方可以找?好没问题,那下一步就是写模板显示啊,这个呢,数据量稍微有点大一点一点写没关系。现在写他呗。啊,写它的话,这里面不就是UI里面很多ii吗?能看出来吗?没关系,去掉一个ii。干嘛去V负是不变定我们的这个故子是不是就是个数组对吧?所以我就变定这个故事呗,那我怎么写小括号运谁?Good里面写什么?那就写good吧,好吧,Index。冒号K等于index,下面是不是要显示good里面的数据?那我得先看一看good里面有哪些数据对不对?
12:08
你看这里面有两个啊,一个是内,一个是什么。I看能不能看到,一个是一个是I抗。来看一下name不显示他吗?大括号对不对?这是什么good点,那现在是不是爱看S的显示?那我怎么写,先写三八号再说。接着过的来看,但它一定有吗?不一定有,你要不一定有,那这个事就报错了,知道不也是什么意思,大家看它这个也有,但下面的都没有。这个能懂吧,如果这个值没有,你要这么去搞,那报错了。那个怎么办啊,这个地方也就是说没有的话就没有必要去解析了,对不对,因为这个src去加载图片啊,这就有问题是不行的,得不到图片应该用什么v if搞个什么good点来看,说白了有值才显示,没有值拉倒image的不要了,要它干嘛嘞。
13:18
能懂吧,啊这个是比较简单的,说实话,实际上我们现在就显示了左侧的。分成对不对,但是他们搞的都是绿色的,是不是我们就是不是当前的才是绿色。是不是概念,而且我的背景都是白色的,你看只有当前的才是白色的啊,主要在于什么呢?在于这个属性,也就是说这个类名,这个class只能有一个iiu。对吧,但是呢,这个得得什么动态确定是不是概念,所以我先不做这个呢,做下来有点小麻烦,先放着。
14:03
能懂吧,我们来看一下现在是不是都没选中。啊,选中那个操作,等会再做。能懂吧,能懂好大家看一下啊,看一下我这里面最后是不是特色美食。但他这里呢?你看,难道我没有特色美食吗?有没有有单词啦。我的我这个说一下啊,我看到我是个什么情况,我这里面有一个看这个啊。看到这个了吗?我外面有一个包裹的div。能看到不,呃,这个包裹的div的高度已经被什么,是不是会确定了,被固定了对不对,但是我的URL的高度是不是超过了什么。Ii的个超过了那个包裹div的高度对不对,但是呢啊,那下面的超过的部分就是什么,是不是显示不出来,按出来说应该要形成什么,形成滚动对不对。
15:11
扔包形成滚动,但在滚动呢,我们后面要用到一个库去做,而不是用系统浏览器的什么啊滚动条扔包啊,这个时候我们等会再做啊,等下做。先我们是实际上实现一个静态啊,把那个数据先显示再说,后面再做一些交互。好,左边的列表没问题了吧。下面搞什么?右边的。来,把左边的先收起来。啊,一点点写啊,不要急,下面呢,我们去看一下啊,这里面整个是一个ul,整个列表里面iiii里面大家看啊,有一个一这是标题,而这个标题显示的什么。分类的什么东西名称对不对,也就是说这个ii我是不是也要产生一个什么便秘吧,来一个什么恢复变异的是谁固执,实际上跟我刚才写的是什么一样的。
16:16
对吧。这个能不能懂好,而这里写什么,刚刚才写法其实也是一样的good点。能不能看懂啊,要能看懂啊,那此时实际上啊。我们不喜欢看优惠和什么。是不是折扣啊,能看到吧,啊好。来,下面我们继续啊,继续往下去看,那下面呢,它又套了一个什么ul,而下面又这个UI干嘛去了,显示什么去了。哎,这个ii可以干掉的吧。
17:00
对吧。要一个就够了嘛,这个是不是显示我们某一个分类下面的实物列表去了。就能不懂显示是某一个分类下面的实物列表去了,那好了,那我实物列表的数据在哪呢?我们来看一看啊,实物列表的数据打开我的UX啊,在这里面看比较方便。这不固子吗?当前是某一个是不是,哎,它下面有个什么,是不是有个负子啊,大家看看有个负子啊,这一个啊,这一个,这一个叫一个什么名称,我们刚才good对不对,下面我要编辑是谁good里面的什么副词?一定要搞清楚这个结构啊好,来下面。就这个呗,来写个什么for,被编辑的是谁?
18:02
Good里面的什么副子,那拿出来每一个是什么负呗,现在写了吗?Index这都可以写。冒号K等于in X能不能看到,那要来看到啊好,那下面里面整个ii里面所有的,诶这里面好几些把这个也干掉是吧。一个就对不对啊,大家看啊,下面我I里面有很多显示,必然是从这个里面取数据,一定要认定了,肯定从这个里面取数据显示。懂不懂啊好,那我有哪些需要显示的呢?首先我的这个实物是不是有一个小图片呢?来,我来看一下,主要是要看一下用什么属性的问题。啊,打开一个附子,打开一个负的。
19:00
大家看啊,它这时候有两个关于图片的属性,一个叫image,一个叫icon。那到底用哪一个了啊,用icon这个得说一说,我们的图片分为大图和什么小图,你看嘛。能懂意思吧,啊,这个用的是image,呃,外面用的什么I。这个能理解吧,啊要能理解好。那实际上呢,我们现在啊,我们现在要去做的显示啊,就比较简单了,就是把这个去掉是吧,把这些都去掉啊。都去掉,我们在这里面写一个什么,诶退到这里来冒号。接着是负的点icon。能看懂吧,那后面的事情其实都不难啊,都也都写的是比较比较简单的一些写法,就是负的点什么东西是不是很懂吧?呃,下面这一些是不是都应该是负的点什么东西啊?嗯,这里面我就直接搞上啊。
20:12
能懂我说意思吧,啊,一个个来看啊,一个看啊,这个是食物的名字。嗯,这个这个名字呢,我们应该看到的是我的实物,不是看这个info是看实物的,诶实物在这是吧,打开它一下。食物的名字是什么?Name?懂不懂,刚才这一个是一个咸州啊,田州这叫什么,第是corruption。做什么懂?现在是月售多少份?月瘦多少份?是不是他呀,嗯,双击一下。对吧,接着好评率多少RA啊,好评率100%是吧,接着是说实物的什么当前的价格。
21:12
嗯,当前价格,诶,它还有一个什么价格old price,诶这个我们没有写,我们来去找一下这个有old price的地方。大卡呢?找到一个有old price的,不可能每个都没有啊,哎,这是不是就有啊,有的话那我得去看一下它是一个跟它是个什么关系,那是不是有这样一个。啥?有这样的一个东西,那你说他是不是有可能显示有可能隐藏啊,而他这个隐藏啊,是消失用V应该是。对,不来,这里面是负点什么old price,有值,有值我就干嘛显示。
22:00
能不能看到那这样呢,我们就把这里面的数据都给它处理了一下。嗯,这个结构好像有点不太好啊,嗯,这样的好,这一个呢,我们现在写不掉。这个还写不了,因为这是我们下一个要写的一个主页是吧,先表意一下。好,来看一下我们当前的。美女吧。这不可以写是吗?跟着能不懂能懂啊好,但是呢,现在我们肯定是还不能交互,对吧,还不能跟用户交互,就是用户点呐划呀都不能做。但数据是这么。这也没什么难度。还是我们说的那三步啊,第一步先想办法去触发action调用,把数据拿到。VX里面去是吧,接着再从VX的state里面把数据给他什么读到组件里面来,接着在组件的模板里面把数据给他什么展现出来。
23:10
基本的流程是固定的啊行。嗯。
我来说两句