00:00
好嘞,各位说完了这个默认查槽之后呢,再给大家讲一个茶槽,叫做句名查槽,回到课件里啊,往下同学这么写的,这两个字儿,句名非常简单,它的含义就是具有名字的茶槽,我们刚才写这茶槽啊,它没有名字,同学你看我就直接写了一个lo,诶就放在这儿了,可能有一些同学说老师挺好的呀,没有名就没有名呗,放在这儿这不也能用吗?但是你考虑这么一个问题,如果有一天你这个结构当中啊,出现了多个插槽啊,比如说有两个三个,甚至是更多,你就得给每一个插槽都得起一个名字才行啊,我设计这么一个效果啊,各位,就是我想让每一个分类的下方啊,再多点结构,哎,然后我想的是呢,把这些东西,这个图,这个列表,这个视频我是通过一个插槽放进去的,其实这呢我们已经实现了,然后我。
01:00
想让蓝色的这几个区域里边的东西呢,是通过另外一个插槽放进去的,也就是说我会写出两个插槽,说老师一个就办不到呗,不是各位一个也能办到,就拿这个美食来说,不就是图片的下边要有这么一个A标签,叫更多美食吗?咱能写各位啊,回来同学你看啊,我还用一个插槽,回到APP里面,你就弱弱的在这儿写一个A标签,其实往哪跳转都无所谓了,咱们随便写一个啊,往咱们这个上硅谷的官网去跳转,艾特硅谷点com,然后里边的内容呢,是更多美食保存,回到这儿,同学你看能不能实现,能是吧?哎,不是说必须得写多个插槽,咱不是想练习一下嘛,哎,所以说接下来我的设计是这是一个插槽,然后呢,这是一个插槽,也就是你得写啊,多个插槽,哎,同学说简单,老师我能写回到这个category里面,不就是多个插槽吗?再来一个啊,在这呢,我写一个一啊。
02:00
在这呢,写一个2I,这是一说老师这不就写完了吗?嗯,那你的想法是不是这样啊,人家干活的时候,哎,拿到了这个image发现,哎呀,这是你这个组件标签里的第一行,那我就给你放在第一个插槽里,哎,那你这个是组件标签体里边的第二行,那我就你放在第二个插槽里,你是不是有这种想法,但是同学它不是像你想的这样工作的,你看一下效果,如果你这么写啊,看一下效果刷新,你发现里面所有的东西都是双份的,为什么呢?给大家解释一下,其实很简单啊,View呢,在解析这段结构的时候,哎,解析完了image,解析完了A标签,然后就问了,还说我往哪放啊,兄弟,你说在这儿呢,我写了插槽,然后结果人一看呢,好家伙,这有一个,这有一个,那人家就只能把这个image和这个A标签在这里放一份,在这里再放一份,所以说你发现所有的东西它都是double的,都是双份的,这不是我们想要的效果。来回到代码。
03:00
里插槽确实得写多个,但是每一个插槽都得有一个自己的名字,怎么去指定名字呢?哎,用这个特殊的属性叫做name,你写别的不行啊,来给它起名字吧,这个名字呢,随便起,你比如说这个叫DEMO,哎,完了这个呢叫做test,可以,但是我想按照位置啊去给它起一下名字,这块是头部,这块是中间,这块是底部,所以说这块我叫做C啊,Center,然后这块呢,叫做foot啊,Foot特代表底部,OK,同学,你看两个插槽是不是准备完毕了,并且是不都有名字呀?啊,那回来吧,同学说老师这回肯定行了,那你看看效果吧,哎哟喂,这什么情况啊?你看输出这个了,什么一又输出一个,诶,什么二同学什么时候会输出这段文字来着,我们说如果你不往这个插槽里边放东西,那么插槽里的默认值就会出现,那也就意味着这两个插槽都没有人往里放东西,说老师不对,我放了,我写了这不在这儿呢吗?各位,你只是写了a image这个标签,A这个标签,你并没有告诉人家a image往哪个插槽里放,人家这块叫center,这块叫foot,你有说吗?你到底往哪里放吗?你没说,那怎么说呢?哎,就得靠一个特殊的属性了,叫做slo,告诉人家这个image呢,想往三特那个插槽里放这个A标签啊,想往这个foot特那个插槽里放,这回就可以了,回头看一下效果,各位,这不就成了吗?那这块大家应该也会改了吧,啊,回到这个游戏里面,同学,我想把这个ul放在哪个插槽里C啊center,那么回到课件里。
04:44
我的效果是下边还有一个单机游戏,网络游戏,那来吧,写两个A标签呗,在这儿写一个A标签啊,我直接复制过来吧,各位啊,跳转地址啊,我就不再改了,不耽误你时间了,直接改内容啊,这块叫做单机游戏,再来一个叫做网络游戏,OK,诶,网络好了,然后这回呢,同学你看你把这个放在福特吧,你把这个是不是也放在福特啊,哎,舒老师,会不会产生覆盖呀,不会,这个东西放进去就把这个给覆盖掉了吧,不是的,同学,它是可以追加的,也就说你可以写一堆啊,都往这个福特里放是没问题的啊,那在这儿呢,我只放两个好了,看一下效果啊各位回到这边走,你看单机游戏,网络游戏,但是和我这边的样式啊有点差别,它是居中的,而且两边留出了那个空白,那咱写一下各位,那把这A呢,那我可以这样去做啊各位,呃,我给他包一个div行吧,哎,有些同学可能有这个想法啊,各位这样做是不对的,你看着他这么写说老师啊。
05:44
NBSP我就来个空格呗,让他俩中间隔开点距离,同学不是说这种写法不好看,然后说不行,是这么写行不通,你看着我写很多个NBSP,然后你看一下效果,各位它不奏效的,你刷新它也不行,为什么呀,同学,因为这块不属于结构,人家放的时候是把这个lo所在的那个元素,哪个元素啊,A元素放入福特,以及这个放入福特,你的这些东西咋的没有机会放,哎,所以说你可别这么写啊,那一个标准点的写法呢,就是把这两个A标签是不是包一个div啊,然后里边再写这A标签,然后给这个div呢,给它上一个样式,比如说呢,让它叫做也叫做foot吧,啊,我叫foot,防止你跟这个呢混了,我叫foot啊,然后在这儿呢,同学,你觉不觉得我就不用每一个A标签都写一个slo了,我给最外侧这个div来一个slo,然后告诉foot是不就行了,那这个样式得写一写我。
06:44
想让这A呢横向排开,然后并且呢是有间距的,那我就写一下啊各位哎,我利用这个样式吧,这不也有display flex嘛,这不也有那个主轴对齐吗?那在这儿来逗号点2FOOT啊,跟它有同样的样式,回到这儿呢,看一下效果,这不就成了吗?是吧?各位啊,那这边呢,那来接着写呗,各位往上滑,这个video我想放在哪呢?是C中间这个位置,然后你注意了,回到课件里,下边我想放几个呢?我想放三个经典热门推荐,那回到这同学非常简单,把这个div给它复制一份,然后呢,在这儿敲个回车走,也是放在foot里的啊,然后分别叫做经典,哎,然后呢是热门,再来一个叫做推荐,OK,写完了吧,回头看一下效果,走这不就成了吗?然后呢,这里边儿有一个细节上的问题,我得给大家呀引出来,同学,我想让电影分类的这个位置啊,出现一个H4。
07:44
标题哎,叫做欢迎啊来到影院去观看,那我就写一下啊,回到这儿在哪呢?在这个下方,那我再写一个H4,哎,叫做欢迎前来观看啊或者观影,嗯,影视啊,欢迎前来观影,我把这个呢,也想放在这个福特插槽里foot啊,是不是得这么写呀?嗯,回头看一下效果啊走来到这儿了,也想让它居中是吧,这强迫症忍不了啊,把这H4呢,写一个样式给它放在这啊,写一个text line center OK,写完了吧,嗯,都是居中展示的,那同学啊,你看看啊,就当你往这个插槽里放这个和放这个的时候,你是不是写了两遍?嗯,说老师什么叫两遍呢?你看这儿是不是写了一遍这个,那你看这儿呢,是不是写了一遍这个,同学你不觉得有点烦吗?那你说我有四个东西都要放在foot特里,那难不成你还写很多遍lo等于F特?哎,说老师,那我知道你想怎么说了。
08:44
你肯定是这个意思,把这个div啊,慢点来,把这个div,哎,就是包裹着三个A标签的div和这H4啊,你肯定得这么做,你得写个div,完了再把他们几个给它包在一起,老师你肯定是这个意思,完了这呢不写lo,对不完,这呢也不写lo,你不就是想写一遍吗?诶老师你肯定是这意思,然后写一个for,老师你肯定是这意思是不?诶在这呢,缩进调一下各位给这个往前动一下,哎,让它对齐,这是这个,这是这个啊,能不能实现呢?肯定可以的,刷新一波,对吧?但是在这儿的同学一个不好的地方就是你无缘无故的我问各位,你是不是包了这么一个div。
09:24
对吧,其实这个div本不应该出现的,你比如说我审查一下元素,右键审查,你看这H4啊和这个包裹三个A标签,这个div的外侧,你觉不觉得无缘无故就包裹了这么一个div啊,那大家知道我应该用什么了,不能用这个div,哎,有一个东西它能包裹元素,最终呢,不生成真实的盗墓元素,那是谁来着?Templatet对吧?各位,诶诶回来tempd,比如那快捷键啊,快捷键可能生成更多的东西了,我给这个改成time,那这呢也跟着变了,同学们,你看这回的效果刷新一波是不是跟刚才一样,哎,但是你省了一层结构,你看这儿是不是有1H4啊,然后上边是不是包裹着三个div啊,三个A标签那div,然后你再往上找同学,这就是整个那个分类的div了,对不对,省了一层结构啊,说老师你就想说这个呀,之前不讲过了吗?哎,同学听我说,一旦你用了这个东西template,你的这个东西就有第二种写法了。
10:23
同学,其实现在我只教了大家两个东西,一个就是怎么给这个茶槽起名,用内幕属性起名,还有就是我教了你另外一个东西,怎么去指名道姓呢?把一个元素放入指定的这个插槽,是不是用这个slo属性啊,那如果说你写的temp类的这个标签,你在这可以有第二种选择,各位不写lo等于foot特了,有一个最新的写法啊,是有这个2.6新提出来的,同学怎么写呢?看着用这么一个写法,V-lo,然后冒号,直接写foot,不要再加引号了,同学注意啊,不是V-lo,等于完了再写引号,写foot特这块是什么呢?冒号,而且后边不要加引号,就直接写V-lo,冒号foot特也行。哎,回来刷新一波看可以吧,哎说老师,那我明白了,那就是这个东西复制一份,我在这也可以这么写呗,对吧,我不写。
11:23
Float等于福特,我写V-lo冒号foot特,这不也行吗?各位,那你看一下效果啊,报错了,报什么错误呢?读一读,这挺坑的啊各位其实挺坑的,他说V-slo仅仅能被使用在组件的template标签上,也就是说各位如果你想把一大段结构交给foot这个插槽,不能用这种写法,哎,你只能用正常的这个写法,Slo等于你只有遇到了template的时候,你才可以用这种新的写法,哎,所以说你发现公司干开发呢,很多人他不用这个新的写法啊,很多人呢,他还是用之前这种老的写法,那在这儿呢,我给大家把这个新的写法呢放在这儿,其实我之所以想加一个H4,我想把template引出来,之所以引出template,是想给你讲讲这个最新的剧名插槽的名字怎么写,OK,好的同学觉不觉得其实所谓的剧名插槽没那么高大上,就是说的通俗。
12:23
啊,当年啊,在这儿挖坑的时候啊,给每一个坑取个名字,然后等到这儿呢,你去填坑的时候啊,你说明白把哪个结构填在哪个坑里,这是不是就得了呀,各位来把这src呢,给它复制一份放在这个里面,给它改一个名字,各位这回呢,叫做二_src叫做句名插槽对不好,各位,那这一小节呢,我们停。
我来说两句