00:00
好嘞,各位github搜索案例呢,咱们就写到这儿,接下来呢,按照课件上的顺序继续往下推进,刚才啊,我们是在4.2,其实下边呢,还有一个4.3 4.3里边没有什么内容,就是把这个A和这个view resource呢给你形成了一个对比啊,并且告诉我们说这个东西啊官方已经不再维护了,还是推荐大家呢使用这个,那4.3我就直接过了啊,各位直接进入4.4,给大家讲一个view里面比较有意思的东西啊,叫做插槽,你先不用琢磨这个概念,我设计了几个效果,能把三种插槽呢都给大家引出来啊,我们先看第一个啊各位,我不使用插槽去实现这么一个效果啊,页面上的展示三个分类,哎,分别是美食,游戏和电影,其实当你拿到这个功能的时候啊,你应该马上有一个反馈,就是你得去封装一个组件了,因为你发现无论有多少个分类,它们的形式都是一样的,在上边呢都是有一个标题,在下边儿呢都是有一个列表,唯独不同的地方就是里边的数据是不一样的。那我们只需。
01:00
要用这个组件的时候,哎,动态的把数据给它传进去是不是就可以了,所以说接下来呢,我会封装一个组件,专门叫做分类,那它的名字叫什么呢?哎,做过电商的同学应该对这个词非常熟悉,叫做catry category,本身是不是就有分类的意思呀?啊,你别用这词,什么type是吧,种类啊,有点low是吧?用这个catory好了,回到代码里,我们写写啊,那我就把这里边的这些东西啊,我就都删掉了,然后新建一个组件cat.view里边的形式呢,给它写好,名字呢,给它写一下啊,So name好,然后结构呢,同学咱简单写写啊,写一个div上边是不是有个标题啊,别用H1太大了啊,我在这呢用的其实是H3啊,先写一些假的数据,什么什么什么很类,然后下边呢,都是一个ul Li的列表,对不对?哎,叉叉叉随便写四个就行了,OK,写完了,但是它还有一些样式在里面,所以说给它来一个class啊cat,然后把这个东西呢给它复制。
02:00
在这呢,写点样式同学,首先它有背景也ACC来一个天蓝色对吧,那再其次呢,它得有宽和高吧,啊宽和高呢,同学你听我说啊,在这儿呢,我就是精心设计了一下,你别随便写,可能你要写的太长了,就超出去了,我在这儿呢,宽一给200,哎200W200,然后这个高呢,我统一给300啊好了,写完了,然后看一下效果啊各位,但是不行,还没用呢,是不?哎那所以说把它关掉,来到APP里面同学,不用引入这么多,引入一个就可以了,Cat把这个给它复制,注册的时候呢,给它注册一下好,然后在这呢,不用list也不用这search了,用它,然后啊各位我做一个事啊,就是由于我之前用了BOO strap就会导致啊,可能一些样式啊,它就跑偏了,我想的是这样,我也是这样写的,但是可能bootrap就把我的样式改了,所以说回到这儿呢,我把这一行代码给它注掉,我不引入bootrap,完全靠我自己写是吧,这个container呢,给它留着呗,诶先放在这儿好,那这回呢,咱看一下效果啊,回到页面里面,诶就这么一个效果,对吧,什么什么分类,但它有三个对吧。
03:00
那复制两个OK里边的内容啊,还得再调一调,首先呢,它们三个是横向排开的,那在这儿呢,写点样式,写一个style啊,你得给这个副容器去设置这个排列对不对?所以说得给它,你别在这里面,同学我要的是它们三个在一个负容器里横向排列,那我就把这个的样式得写一写了,同学,浮动也行,定位也行,哎,那在这儿呢,我用这个比较方便,Display flex是不是那个什么弹性和模型啊啊,这个CSS你不写也行,来删掉吧,好啊,那这回看一下应该是横向排开了,但是离得有点近,是紧紧相连在一起的,我这个案例呢,是中间还有缝隙,对吧?那同学是不是得调一下主轴的对齐方式啊,Justify content,然后写一个space,忘有些同学可能写到这儿啊,说老师完了,彻底废了,这f flags这布局我忘了呀,我都忘了这个主轴,这个对齐什么的,同学你听我说啊,忘就随他忘在这先不用去复习啊,你把vu这个课听完了之后,你自己呃写的七个八个页面练一练就可以了,OK,工作岗位上如果你真忘了同学官方文档往。
04:00
旁边显示器一摆就看呗,对吧?哎,在这儿忘了,没有必要在这儿纠结啊,来刷新一波,你看中间是不是就有这个缝隙了,但是这个东西啊,它是有背景的,并且是在正中央展示的,那我就得回头调这个category,对吧?来写一个给这H3呢?嗯,H3首先呢,这个文字是居中的texti center,然后再给他来一个背景色,嗯,是橙色的保存回来,诶,是这效果对吧?各位,但是里边的数据啊,都是我写的假的,哎,都是写死的数据,那接下来我用的时候,各位是不是把数据给它传进去就得了呀,你比如说我用这个categorory的时候,我传点美食的数据,这个呢,传点什么电影的数据是不是就行了啊,为了便于这个我们去编码啊,也为了节约时间,同学,我已经提前准备好了这个数据,我不会在这儿就写一个data,哎,说同学来咱准备点电影呗什么的,太烦了啊,直接写好了,在这儿呢啊,这是美食的,所以说叫做副S啊,游戏的games,电影呢,Films对不对?好这些呢,全都给它拿回来啊,这里边的东西啊,同学我都是随便。
05:00
写的,你比如说你看这个films啊,你看这个电影里边还有个电影叫上硅谷,上硅谷什么时候拍过电影啊,或许有一天咱们能拍是吧,好了各位,这些东西呢,写完了,那你说接下来怎么办呀,这个传给美食,这个给游戏,这个给电影是不是就得了,所以说来吧,各位把这些东西是不是得传给他们呀,但是你别这么传啊,各位你比如说我给他的时候啊,叫做副词啊,在这来一个冒号,说老师诶这回呢,我就传走了,我一写副词这不就得了吗?然后在下边这块啊,我复制走走,然后这块呢,我叫做games games,我这叫film films同学你最好别这样传,因为你想啊,你这样传同学人家那边是不是得声明接收啊,那你说人这边得怎么声明接收啊,样式先折叠起来,人得写1S对吧?那接收什么呢?哎呦,这东西可老多了,各位是不是得接收副词games film1堆这些名字,那你说万一有人在这儿复用了这个组件三四十次,那你怎么办呀?你在这还接三四十个东西是吧?所以说在这同学咱这么大不。
06:00
让他这个名字啊,这么随意,副s games统一都叫这个东西叫做list data列表数据,然后后边的这些东西你在动态的给他传对不对,那人家在这儿接收就轻松了呀,直接写一个list data是不是就可以了,哎,不要弄那么多的名字,OK,但是还有一个东西啊,你没传过去,这个是美食的,那所以说在这儿啊同学不是叉叉叉分类是不得是美食啊,那这儿呢,是不什么电影什么什么什么这个其他的什么这些东西啊哎,那来回来各位除了传这些还得传啥呢?就是分类的标题呀,你说对吧,各位,那第一个很明显是给美食的,那我就直接写了呗,美食,但是后边这些不是啊,你比如说games,这就是游戏是不?哎,然后在这儿呢,这就是电影,好,这回传进去了吧,哎,Title,那在这儿呢,是不是得接收一下啊?哎,走topsma title,你这些东西得很轻松就能写出来啊,叉叉叉,用叉之语法替换成title,那剩下的这些东西,各位我是不是得用v for进行遍历啊?哎,那遍利的时候同学怎么写来着啊,什么什么in,什么什么对吧,Item in。
07:00
In哪呢?List data,就是你在这儿啊,不能叫game food film,因为你不知道传进来的是什么,统一都叫item,那在这儿呢,直接展示是不是就可以了?哎,然后各位既然是便利,那你别忘了一个人的冒号key对吧?那这用什么呢?Index,那在这呢,是不是得写一个index啊?那标准点两个东西是不是得用一个小括号?OK,这不就写完了吗?啊,回头看一下效果刷新同学多么完美呀,是吧?美食分类,游戏分类,电影分类啊,每一个里面展示的都是对应的数据。好,接下来呢,我开始说一个东西了,就是我要改需求。需求改成什么样呢?来回到课件里面啊,或者说工作的时候,你的产品经理改需求了啊,说小张啊,你调整一下,就是这几个分类里边啊,咱们现在公司啊,临时搞活动就是这个美食分类啊,里边你别列出这么多的列表是吧,你就给我展示一个商家的图片啊,为什么呀,因为他充值了对吧,我们要主要宣传它,诶你就把这个烧烤店的这个最诱人的这个烧烤图案给我放在这儿啊,然后说这个电影啊,有一个这个这个人也充钱了是吧,你就给我展示这个电影的宣传片,别的不要看啊,但是游戏这块呢,没人充钱是吧,那就这么地儿吧,游戏就是大家都公平是吧,我把一堆游戏列在这儿,那同学接下来你怎么办?
08:15
哎,有些同学说老师那太简单了对吧,不就是不展示列表展示这个烧烤这图片吗?啊,太简单了,回来老师这列表啊,不要了对吧,除掉不要了,我就在这直接写个图片,这不就得了吗?啊朱老师那地址呢,哎,地址我也给你准备好了,在这呢啊有一个图片的地址给他复制好,我给他拿回来,诶说老师这就行了吗?嗯,试试呗,反正我改了列表没了,是一个图片了,对不对?嗯,回头看一下效果,各位,诶,好家伙,是游戏也变成了烧烤啊,这个电影也变成了烧烤。你这不对呀,各位,也就是说有一种感觉啊,我要是给这个category这块一改吧,那就是所有用到category的地方是不是就都跟着改了呀,但是我的要求是什么呢?各位就是说这个美食啊和这个电影啊,来回到这儿,美食和电影改,但是游戏不要改。
09:03
所以说同学你琢磨琢磨,你这块不应该住掉,你说呢啊说老师那就不住掉,那不住掉,你再回头这同学那这啥呀,每一个列表后边咋的匹配一个烧烤,这不对啊,哎说老师那这怎么办呢?啊有些同学啊,可能有这种想法,哎说老师啊,我这么写,你不就是想让美食那块展示那个图片吗?老师,我条件渲染吗?对不?哎同学你看人家想的是对的,V-show同学条件是什么呀,便利的时候啊,那你说我什么时候展示这个列表?同学很简单,我就问问你这个title是否等于啥呀,美食,哎,美食,如果同学title等于美食,你说怎么办,我是不是得展示图片,不展示这列表了呀,那你这就得这么写,不等于美食,诶英文的啊,不等于美食,然后把这个呢给它复制,复制到哪呢?复制到这儿,哎写什么呢,就是如果它等于美食对不?我总感觉这写的还是中文的,嗯,确实改一下,哎不等于是吧,那苏老师这回就行了呗,那你试试呗。
10:04
哎,一刷新老师可以啊,啊,这图片有点大是吧,咱调一下回到这个APP里面啊,不用APP啊,我这个image写在这的是吧,那我在这调一下就得了,你这个结构在哪样式就写在哪吗?嗯,在这写一个啊妹纸宽度呢,让它撑开就行了,100%走,说老师你看这回不就好了吗?哎,你看美食这是这样,哎,同学我问你啊,我的要求可不是一个电影,这你还得处理呢,对吧,你得展示一个电影的宣传片,说老师那更简单,我就接着写呗,既然是一个电影的宣传片,那我就这么写了,直接video走起,老师不得有src嘛,然后写一个什么地址,我给这个video呢,也给他加个条件渲染,就说如果你怎么怎么地,那同学我问你,如果有十几个分类,而且里边的逻辑还都是不一样的,来吧,你就写去啊,这个V杠受写着写着,同学你都不知道你应该写多少遍了,然后最终整体这个逻辑啊,这个结构就特别特别的乱,所以说同学一个正确的解决方案是这样的,来把这video呢,先删掉这块啊,你不要写这个什么V-show,也不要在这写这个image啊,这个图片。
11:04
把这个图片删掉,然后呢,各位你听我说这块呀,也别写这V杠受这ul,同学我问你是不是毕竟有一个人要用这个ul,哎,所以说这个ul呢,你听我的,我给它剪切走,然后我临时呢,给它粘在我这个文本档里,省着一会儿我的剪切板把它顶丢了啊缩进调一下好了,先给它放在这儿,说老师那要是按照你这么写,那这里边就没东西了呀啊,确实是说老师那分类我知道得正常展示,但你这么写这块就没东西了呀。嗯,别急嘛,我先用几个问号啊给它代替以我目前的这种写法啊,各位你回头看效果对吧,每个分类下边都没东西了,那接下来呢,同学神奇的东西啊就开始出现了,瞧着啊,回到APP里面,同学我就问你一件事儿,我们写组件标签一般在脚手架里面,官方推荐我们怎么写,第一种方式是不是可以写这种字结束标签,诶调一下画笔啊,就是在这儿我写了一个category,然后在这呢,是不是字结束,然后你还有一种选择,就是在这儿再来一个结束标签,对不两。
12:04
写法吗?你看刷新一下都是可以的,也没报错啊,那然后你接下来看啊,你美食里边听我说是不是想展示图片啊,好,就直接在这儿写图片,各位我们之前从来没这么写过代码,你一定要注意了,同学,你说第四行属于什么呢?第四行是不是属于这个组件标签里边的标签体内容。对不?各位,我们之前写的这些粉色的都叫做组建标签的标签属性,这个红色的叫做组建标签的标签体内容,我们之前从来没这么写过,就是要么这么写,哎,要么像我刚才说的咱字结束,但是今儿呢,换写法了,各位有开始标签,也有结束标签,而且呢,诶还有标签体内容呢,那这个时候你再把这src呢,给它粘过来复制好了,给它放在这儿,然后这两个呢,我给它注掉,咱就研究一个,各位咱就把这美食给它研究明白了啊,那我问各位,你说我像这个345这个写法啊,这三行你就告诉我同学我用没用,Category这个组件我用没用,你不能说我没用,同学我用了呀,这不是开始标签吗?这不是解除标签吗?我用了,既然你用了,我问各位,那页面上能不能出现一个分类的小窗口,必须能随时回头看,嗯,有吧,但是一个搞笑的问题出现了,同学,这玩意儿呢,对吧?吃了丢了,它咋没了?
13:28
那那你看同学这事就说不过去了,嘿,我写了一个image标签,他咋不奏效呢啊,说老师你刷新一次,我不刷新刷新也那样啊,这是怎么回事?说老师我明白了,就是view没有解析第四行,第四行不对不对,View绝对解析第四行了,那为什么没有出现东西呢?哎,直接跟大家说啊,是这么回事儿,View啊解析了这个345这三行,解析到第四行的时候呢,View发现,哎呦,这兄弟啊,写了一个呃,妹子标签会给你解析的,但是同学他把这个标签解析完之后啊,他不知道往哪放了。
14:03
说老师那咋就不知道往哪放了呢?这image标签不就是写在这个组件里边的嘛,那它很正常嘛,就把这个image标签给我放到绿色的这个category这个组件里边不就得了吗?同学说的简单,那你来吧,人家把这标签解析成DOM了,现在呢,人家打开这个category这个组件,你告诉我吧,人家往哪放?说老师,那就往这儿放吗?这是我需要的,同学你心里明白要把那个image放在这个组件的第四行里,但是view不知道,还觉得放在这儿也挺好呢,View柚甚至还觉得放在H3里边还挺好的,然后vu琢磨半天也不知道放在哪儿,那vu说算了,不放了,对吧?所以说同学你看你的标签没有起作用,那怎么能通过一种办法告诉view you说这东西啊,你就给它摆在问号这个位置,那怎么去写呢?哎,用一个特殊的标签,各位叫做slo啊,尖括号slot slo啊,当然呢,给他也得结束一下,OK,同学,你这就属于打标识了,Slo本身这个词slot就有插槽的意思啊,那在这就相当于怎么办,你告诉人家了,一会儿呢,我这个组件标签里的标签体的这个image,你给我放在这儿,别往别的地方放,OK,保存一下回来看效果,各位,嗯,就出现了呗,明不明白,哎,就是放肯定得放在是放在哪儿,你不告诉人家,那人家就不知道。
15:25
放在哪了就不放了啊说老师那我把它放在上边呢,你放在上边H3那就跑到下边呗,哎所以说同学你觉不觉得通俗的语言讲啊,在这我给你写一个注释,叫做定义一个,哎什么呢,插槽写个括号,其实就是挖个坑,哎,等着别人啊,或者等着组建的使用者进行什么呢?填充是这意思不?各位啊,你看挖个坑对吧?诶像那个赵本山演小品是吧,你在这儿挖个坑啊,等着他在这边呢填点土,就这么回事儿啊,而且这里边呢,还能指定一些默认值,哎你就比如说我是一些默认值,当啊使用者没有传递具体结构时,然后呢,我会出现,你看啊,现在我的这个组件的使用者有没有传递一个结构,传了,那你说会展示那些文字吗?不会回来,但是如果你没有传呢?啊,你再回来,这些文字不就出现了吗?默认。
16:25
什么你传用你的,你不传我就用这个是不?各位啊,那来吧同学,这就是一个插槽的基本使用,那别忘了呀,我们还有这两个呢,解开解开,那这就同理了呗,各位走着,这块呢,写一个结束的category,那同理,这块呢,也得写一个结束的,里边写什么呢?游戏同学,为啥我存在这哎,防止再敲一遍了,给它复制,往这一粘贴ul缩进一条,这不就得了吗?但是同学啊,悠着点,List data你是不是不应该再传了,也就是说里边展示的真正的列表什么的,是你在这边准备好了给人家递过去的,所以说不用传它了,这儿呢也不用传了,那这儿呢也不用再传了,那这边呢,当然也就不用再接收了,我只接收一个标题是不就可以了啊,那在这便利的时候可不是in list data in哪呢?In games,那在这呢,我就可以用这个G对吧,Game的首字母,那在这儿呢,展示的就是G是不就可以了,那这个电影呢,也是同理的,是不是得写一个。
17:25
我有标签,那在这儿呢,我给大家准备好了这么一个在线的视频地址啊,我先声明啊,用用这个,用这个视频啊,咱们只是说想做一个测试啊,没有别的目的啊,就是把它放在这儿啊,是一个动画片的一个宣传片啊video好了,那你看这些东西同学来感受一下啊,我用了一次category,并且传递了一个动态的结构,我这儿呢也用了category,并且传递了一个动态的结构,那这个红色的动态结构到底往哪放呢?我听从slo的指挥,对不对,好了,保存,回头看一下效果刷新,各位这不就来了吗?当然这个video啊,有点太大了,那我在这儿呢,调一下各位,然后这个video标签写在这儿,那我就把这样式呢给它写在这儿video,然后宽度呢是100%,好了,这回看一下效果,同学是不是实现了我最开始课件里的这个样子呀,但是课件里的这是能播放的,那这儿呢,它不能播放啊,这怎么回事呢?哎,Video标签里啊,写这么一个东西就可以了,叫做controller,哎,控制啊,Controllers啊,回到这同学就有控制按钮了。
18:25
一点击播放,那这不就能播放了吗?对吧?这里边呢,还有一个细节上的问题需要大家注意啊,就是这个红色的结构,还有这个结构,还有这个结构,我知道最终最终他们三个都是塞到了category那个组件里的这个位置,我知道最终确实塞到这儿了,但是值得你注意的是这样,同学,这个image标签啊,是在这个组件里,是在这个APP组件里面完成解析之后,然后怎么着再给它塞到这个里面去的,所以说同学你想控制image的样式,Ul的样式,还有video的样式,你完全可以把他们三个的样式呢,都写在APP这个点view的下方啊,那你比如说各位我测试一下,刚才我是不是调了那个图片的宽度,我给它剪切走,然后在这儿呢,我写着往下滑,给它放在这啊,为了能把问题说的更明白,我把这个给你加上s scd SCO的同学,我加上这啥意思呀,就是这。
19:25
的样式只控制上方的这些结构,并且我们心里还明白这结构这结构这结构都是在这儿解析完了之后再传过去的,所以说你在这儿写这些样式是完全可以运行的,来看一下效果,刷新一波走各位啊说老师刚才刚才没反应过来是不?诶你看是不是可以啊,那如果说老师我不想把这些东西写在这儿,因为我心底里的感觉呀,是最终这个image啊,Ul video啊都塞到这个里边来了,那我就想把样式写在这儿,那行不行呢?也可以,各位也可以,因为在这儿呢,就是属于解析它的时候,它没有样式,然后呢,把这些东西,诶这个还有这个还有这个塞到这里边的时候,人这里边儿有样式啊,对吧,各位在这我也给你加一个s sed啊,这回呢,看一下效果,刷新各位也是依然可以的,哎,说白了就是如果你样式写在APP的下方,那就是解析完的结构带着样式直接塞进去,那如果没写呢,就是只把结构塞进去,那样式呢。
20:25
这不也能控制吗?同学,这就是插槽的一个基本使用,我们管这种插槽呢,叫做默认插槽,默认插槽什么意思啊,就是直接写了一个好了各位,那这一小节呢,我们先停,然后不去总结各位,插槽一共有三个,你等我都讲完了,我再给大家总结,然后这个目录结构你注意一下,我接下来啊要这么调整了,由于插槽里边的东西啊,这个写法呢,比较绕,所以说我新建这么一个东西,22下划线,然后叫做插槽,然后在这里边呢,各位,我新建这么一个文件夹,零一,哎,然后下划线SC或者别叫零一了,就一就得了,一下划线src完了走一个叫做默认插槽,然后我就把这src里边的这些东西全都给它复制,往这一粘就可以了,如果你想学习默认插槽,请你看这个,一会儿我们还会有什么句名插槽,作用域插槽,慢慢来,好不,各位这小节停。
我来说两句