00:01
好,我们再讲一讲,一点点讲一个小东西,我们就自己写啊。嗯,这个界面里面有这样一个。这个是吧,其实这个效果呢,不仅在当前这一个组件里面引用啊,在其他的一些界面也用到,大家看一下我们记录。对吧,进入以后呢,比如说我们的这个评价里面。看到了。那懂吧,啊,它是有有那个评分的一个。呃,效果,那也就是说有多个界面里面是不是用到同样的效果,那我们就需要去。对,它抽取成一个可复用的组件。其实这个不算特别难啊,因为他没有什么交互,就是一个显示。就扔了吧。好来下面呢,我们来去把这个组件呢,先定义出来。
01:04
定义一下啊,那我们定义成什么组件呢。一般组件还是路由组件?一般组件是吧,来,那我们就来为我们的组件呢写个名字,比如说叫star或者叫star都行。比较大吧。没问题是吧,好,我们当前这个组件是不是需要有些图片来着。而且这个图片是本地的一些图片,对不对啊,不是一个什么图片链接啊,这个图片呢,前面咱用了。在这个。历史里面。看到了吧。啊,把它给大是吧。拿过来,诶,这个时候得说一说啊,把这个拉过来得改一个。得改个名字,不能叫这个名字了是吧,得叫什么。
02:04
你买几十啊。怎么看呢?其实我们的这个组件的模板一样式是不是都写过了呀。在这里面写过来来看一下啊,先找到。那个模板部分也就是。这个部分呗。能有看到这是我们。开X。放在这个div里面。还有一个什么。样子。这里面是不是涉及到一个二插图和三插图的问题,而且它这里面这个图片呢,有好几种尺寸啊。我把他搞过来。它能够自动到时候去选择阿插图三插图,而且这个。大家看到啊,这边为什么是什么24啊,36啊48呀。
03:02
是不是我那些图片大家看着啊,你打开图片你一看你就能知道。啊,实安是有。三个尺寸的吧,24 36和什么48这三个尺寸,而每一个尺寸里面呢,每一个图片它都有。二插图和三叉图还有一个,还有一个有三种分类,一个叫half,一个叫of,还有一个叫什么啊。区别在哪呀?啊,这里面这不是一个半星嘛。是吧,那这个on是什么?全新是不是?那这个呢。没有心,那是怎么没有心的,有心呢啊,空心我叫灰心啊,就是我相当于有三种星星,全星啊,半星和灰心啊,好行。
04:07
来啊。一个组件在写好模,写好他们以后,有一个非常事情,非常重要的事情,嗯,需要大家去做,前面我跟大家说过,就是pro的设计。大家去想,大家去在使用这个组件标签的时候,写这个标签啊,是不是很重要是要传属性呢?要确定我要传哪些属性,这是分析出来的。这是可以分析出来的啊,并不是说不能分析。我们前面说过,整个应用里面这个不同的这个评分的星星,它们之间有什么区别啊。对不,有哪些区别,首先你要去比较啊,哪些区别尺寸大小不一样啊,除了尺寸大小,那分数不一样,它是不是显示的也不太一样。那么懂,所以说你需要去给他指定两个数据,一个是我当前是用来显示评分效果的,对不对,这样有一个评分啊,有个分数啊,它什么类型。
05:11
Number类型是吧,就多少分嘛。还有什么尺寸,尺寸用什么名字,Size什么类型。也是number,只是说它就三个值是吧,二十四三十六是吗?48。没什么好,一旦把它确定后,你先不要去写别的。啊,你先去把它用上。了吧,这样做的好处就是我在写的后面,在写过程中就能够实时的看。懂吗?一旦确定好pro,其实你这个使用就可以用了。什么概念,我要用还是那一部是吧。先干嘛?是不是引入啊啊引入from,嗯,点点斜杠啊star下面的什么star点接着是将它。
06:11
映射成什么标签呗。这啥呀?来看。Poems。是一个什么SPA,没问题吧,好,下面就是去用,用也非常简单,先找到我们要去使用的位置,就在这里,在这个文本分数的上面写一个它呗,对吧,传两个属性,第一个。是个分数嘛,等于等于多少呢?不就等于这个什么。懂不懂,但这里要写什么冒号,接着还有一个size等于多少,刚才我搬过去的是多少?24对吗?
07:08
不对,得用什么冒号,因为他生命的是数值。买去吧,买点。行,那就用上了啊,用上了现在你去看效果,那肯定是一个固定的。那都一样。哎,而且现在没显示是吧,没显示原因是这个。是因为我这里面用上了这个Li,但我没有什么。没有引入,引入了这里这里啊,这里有用。肯定用到了啊,因为我们要去显示这个尺寸。选这个图片看到了吧,而且现在这个图片也不对。看了吧。多了一层能看到吧,啊,很简单,不要这么去改先。选中CF。
08:05
算了吧,嗯,好,那下面啊,这个地方用到了mixing,那所以呢,我需要去把这个mixing给它引入一下,好再来看一下。但是啊,这个地方来啊,我们现在所有的星星都一样,因为我现在相当于是写了一个静态组件。我的这个你看我写的固定的。是不是根本就没有根据什么分数尺寸去变化,对不对?这意思吧,好,那下面呢,我们就要去来去写,这好简单,这一个值是不是动态的一个值,那应该怎么办?冒号class好了,那现在我就问你了。咱用不用对象的模式。用不用?用不用对象的语法。
09:04
用还是不用,还记得用对象语法怎么说来着名是确定的,我只是确定是吧,要不要是吗。明显不是。内名肯定有,只是不确定名字。明显明显不是那么回事,是不是啊,OK,这里面呢,我要显示一个类名,但是呢,这个类名是不是有变化的部分啊,直接干嘛。加上。Swa。对吧,好。难在什么呢?难在下面,大家看一下下面该怎么弄,下面得分析分析啊,下面主要是我要显示五个星星的失败对不对。变化的地方在哪?是不是on half,或者是of,对不对?也就是说我需要确定五个类名吧,懂不懂?记住,我现在需要确定五个类名,只要我手里拽着那五个类名,是不是就知道怎么写了?
10:13
而且这个类名有没有顺序。有没有税据?啊,这五个类别有没有顺序,必然有吗。你不能把那个二直接放在最前面吧,药也是肯定在后面对不对。能不能?或者说诶,我在想。假设,哎,我有一个数组。对吧,我的数字里面放了什么呢?就放那五个类名。啊,我也不知道是什么啊,我也不能确定它完全是什么,但是我知道我只要我手里能够产生五个类名,接着我通过便利的方式,V for的方式来产生五个失败。是不是就能搞定?能听懂我说的意思不,嗯,就是假设我现在啊,我把这些都去掉,这些都去掉,这个不要了。
11:08
对吧,接着我来一个什么呢?V负可以吧,来个in那五个类名的数字,我可以取个名字。因为是那个星星的那个类的数组,那我就取这样一个名字啊,大家能不能理解。懂不懂?这不是代表星星的泪吗?对吧,那名是不是就是加个ES是不是数组啊。看到了吧,啊好,那接着啊,我这一边变异出来每一个是不是都新星的类名呢?那假设我就叫SSCC什么意思。大class是吧,这一个是不是就我需要的class的名字。你们干嘛去冒号?Class就等于C?
12:01
扔吧,接着再来个model k等于index。但是我现在有他吗?没有好没有,我就问你这个数组。靠谁就可以确定。靠哪个我手里拽着的数据可以确定。是不是这个评分呢?能不能,那也就是说我的这个数组是可以根据我的这个SC这个评分是不是来计算产生。对吧,那所以我这个是个什么东西计算属性啊,就刚才这个分析的过程很重要,前面我就跟大家说过,计算属性最麻烦的是你想不到要用计算属性。那不能。嗯。好,那下面也就是说我要根据这一个SC来产生返回一个数组,对吧?那也就是说我可以先把条件准备好呗,这不是我的分数吗?
13:07
对吧,准备条件,同时我还要准备一个什么呢?准备一个CS。是这个速度最终给他什么呢?返回。看懂吗?就这个没在我想怎么做之前,我先把这个想好,这是我的条件,对吧,这是我最重要返回的速度,但是呢,我现在也不知道放什么是不是。看到吧。好,下面要怎么想?我们往里面都放些什么东西啊?放class类名,Class类名能随便瞎写吗?不能,只能是哪几个啊?On of是吧?对吧,那也就是说下面我们要做的事情啊,是什么呢?大家看到向CS中添加N个。
14:05
什么啊?对吗?是不是这意思,其实啊,你也可以写成这个啊,啊听一下这个。能不能看到。好,那下接着是下添加几个什么哦,是添加几个。添加几个。零个或不是off,应该是先是half。不可能是先直接来哦。对吧,Have有几个。零个或者什么一个,最多一个。是不是这意思,你应该就不填是不是,也就是说只有满足某一个条件才填一个。这个吧,那接着是向中添加N个什么哦,这个嗯嗯是什么。
15:05
大于等于零的听到不,N是大于零,但总个数是几个?啊,五个这个很直接对吧?啊,必须是五个啊好没问题。那下面我们就要一步一步写啊,这些值是不是都是固定的。我可以把这些固定值定义成什么,是不是定义成一些类型常量啊,比如说一个叫class啊。啊,你不定义这个其实也没什么太大的问题啊,只是说这样更好一点。能看到吧。好,再来一个哦,这些都称为什么?内名常量是吧?好,有了这些类名常量以后,那也就是说我们在这里面填的这一个是class对吧,那下面第二个呢是class是什么。
16:10
接着是class。对吧。好,来吧,那我到底要添加多少个呢?首先我把这个添加语句写上来,点push。克拉,是啊,关键这条语句是不是有可能要执行N次,N等于几呢?看什么呢?啊,这里说一说啊,我们得先说一下这个里面的算法,这个算法其实很简单啊,我来说几个值大家就懂了,我来说几个值,比如说一个是3.2,一个是3.5。对吧,这有几个全系呢?三个有几个半星呢。
17:05
大家知道吗?零个,那那有几个彗星呢?那自然就是两个了。对吧,那这个地方就不太一样,这是一个半形,这得说一说什么时候出现半形呢?就小数部分大于等于0.5。能懂我说意思不?就那么。这一看你应该懂的就是这个算法,你只要看到这个例子,你就能知道是怎么回事。好,那你说我这个按几个看什么。看整数部分是多少,是不是概念,那很简单了,看整数,那我就得到它的什么。得到那个分数的什么整数对不对?整数的意思,那怎么得了啊不麦有一个方法叫。
18:03
什么意思?大家知道不?本来的意思是地板。对吧,本来也是地板,你想想看嘛,地板肯定向下的嘛,在下面嘛。好,那传什么呢,这个对不对,能看到吧,那下面我要干嘛。现在怎么样,让他执行多少,你来个什么循环呗,对不对,真的不啊,I小于谁。In爱加加里面也不操作,说实话对吧,这里面最好用。也别把挨给污染了啊。有没有看到啊,这个搞定了,下面那什么时候去往这个里面添加一个half了。
19:03
对吧,应该也就是说要达到一个是不是什么条件呢?说白一般会写if,什么条件满足了就执行这个破喜句。对吧,换件衣服怎么洗呢?刚刚说过了,小数部分是不是大于等于0.5啊,那应该怎么搞?减去。大于等于0.5,但是大家知道那个小数的加减不是那么精确。如果他刚好0.5,说不定他得出来是0.499。对吧,怎么办呢。啊,我是这么做的,乘以十。能看到吧,就这么做。嗯,没关系,主要是这里面啊,这里面因为分数也就是最多有个十分位嘛,对吧,就一位小数。
20:07
能看到吧,嗯,好。那最后一个好看最后一个怎么做,那我像这个里面添加N个class of关键,也就是说我下面这条语句得执行NN次,那关键。我执行多少次了?我想用外语做或也能做啊,我这是用一下外语,我想用一个。刚说了总个数是五个是不是?请告诉我,我该怎么写?啊,来写呀。ACS。点。
21:01
认识。小于五。可以不,各位可以这么简。因为我的我不断往里面填嘛,所以这个认识的值不断的改变是不是,但再变再加也不能大于五个,对不对,一旦等于我这Y循环是不是就结束了。那么呢?这外喜欢一个人进去吗?不一定。对吧,得看前面有没有等于五是吧。嗯,这不就可以了吗?你说这个懒吧,他也不难,但是得说,如果没人跟人跟你说过,就完全看你做,你要做出来也不能留意。好,我们来看一下,看看啊,现在是一个什么样的状况,大家看呢,这不有这是一个什么心,把它放大啊。
22:00
这不四颗半星吗?04:07吗?这个是04:02,那就是四颗全星一颗是吗?彗星有外星吗?没有,这就对了。你看这个4.6。能看到吧。那说明我们现在写的写法呢,是完全没有问题的。让你搞定了。再一个也是一个相对来说啊,没有什么太多交互的一个组件。它主要就是根据分数来用图形的方式来显示我的这个数据。好,那这个呢,我们就先讲到这里。
我来说两句