00:00
好嘞,各位在对组件这个概念有了一定的理解之后呢,我们就来正式的说说view当中到底如何去定义一个组件,或者你不用定义这个词啊,用这个叫做创建,哎,定义组件,创建组件那都是一个意思,首先呢,我们必须得明确一个事儿,就是view当中组件是有两种编写形式的,第一种形式叫做非单文件组件,第二种形式叫做单文件组件,哎,之前有同学就跟我说,老师啊,我都不用理解他们两个,我光读他们两个我就已经很闹心了啊,什么叫单文件组件,什么叫非单文件组件?这都什么意思呀?啊,其实可简单了,各位啊,跟大家说说,我们呢,先给大家讲这个叫做非单文件组件,你把这个理解好了,敲熟练了,你会很自然的很轻松的就过渡到这儿,叫做单文件组件,我们先说说它的定义吧,各位,非单文件组件里的这个非啊,它所表达的含义就是否定,哎,说白了,非就代表俩字。
01:00
不是,哎说老师那意思就是不是单文件组件呗,完了我更蒙圈了,哎同学咱这么说吧,这么说大家就懂了,所谓的非单文件组件,就是一个文件中包含有N个组件,哎,体会体会就说有一天呀,你写了一个绿色的文件,哎在这老师那文件是什么呢?就简单说,比如说叫a.HTML行吧,哎,这个文件当中啊,包含着一个粉色的组件,还包含着一个红色的,还有一个黄色的,还有一个橙色的,那同学我问问你文件有几个,一个就是谁a.HTML那我再问你里边有几个组件,有四个同学你看看一个文件里边有N个组件,这N有可能等于几,N有可能等于一,但是N咱说还有可能等于100呢,对不对,哎,文件是一个里边容纳着N个组件,这就是属于非单文件组件,跟它有一个对立的概念,就是。
02:00
单文件组件,这就简单了呀,把它复制过来就是一个文件中,哎,不能说包含了,叫只包含有一个组件,说的再直白点就是,诶,你同样的写了一个绿色的文件,但是你注意了各位,这个文件可不叫a.HTML了,这文件呀,叫做a.view同学你就看这后缀名称,咱们知道点attml.cs.js1看这个点viewu是不是就是view所创建出来的一种文件类型啊,哎,a.view然后呢,这里边只允许你写一个组件,说老师我还想再写一个,不行,写不了啊,文件和组件是一一对应的一个文件,它奏是一个组件,这就叫做单文件组件,哎,那我知道可能有些同学说,诶,老师啊,那我觉得好像绿色框这个更好啊,对吧?非单文件组件,这多好啊,文件只有一个完,里边有一堆组件,哎,这样写起来说更灵活呀,哎,那同学我跟你讲,真正要是拿我们U干开发,你。
03:00
做一个大型项目,绝对用的都是单文件组件,为什么呢?条理清晰,代码好维护,哎,一个点view就是一个组件,换句话说同学如果这种方式好,那么view为什么还要辛辛苦苦打造出来这种文件格式呢?对不对?哎,所以说同学日子还长,我们慢慢来,好吧,先把这个咱给它拿下,这个那就分分钟的事儿了啊好了,给它关掉,回到我的代码当中,文件和文件夹我都建立好了,在18非单文件组件,然后呢,基本使用,我想在页面上啊,呈现学校和学生的一些信息啊,我简单写写啊,各位随便来,这块呢,我先呈现的是学校吧,先写学校的学校名称,哎,然后呢,差之与法,我读出来这个内幕,还有一个就是学校的这个地址吧,是吧,来用这个,哎,Address好,中间呢,我做一个分隔,把这俩复制往下再写,不叫学校了,哎,这个还有这个删掉叫做学生啊,那这块呢,叫做。
04:00
生的姓名吧,啊这块儿呢,是学生的年龄吧,啊学生姓名也叫内幕啊,年龄呢也叫做age,那现在其实你就知道了,他俩打架了对吧?地址和年龄是不打架的,学校名叫name,那学生名也叫name,那所以说你肯定得处理这个冲突,对吧?那怎么处理啊,各位其实有很多办法啊,第一个办法就是这样,School是一个对象,里边配置的name是上硅谷,哎,里边再写上这个address对吧?哎,比如说写上叫做北京,哎然后呢是昌平,OK啊,然后学生呢,你给他再来一个呗,叫做student对吧,用不同的对象给他包起来,哎,有name,然后这儿呢,改一下是age,那这会儿呢,比如说写上叫做诶张三,诶这会儿呢写上是18岁,这么写是不是行啊?各位还有种办法,就是你不给他包这么多层,哎,就这么写,没有这一层,没有这一层,没有这一层,没有这一层对吧?那都叫内,那怎么解决一下呢?好同学,这个叫做school,哎,Name,小驼峰嘛,那这个也换一下叫做student,诶,Name对吧,别忘了这个小逗号。
05:00
那当然你要这样写的话吧,这就得改一下了啊,复制这是不是也得改一下啊,说老师那你用哪种方式呢?我用这种,为什么呢,这么写呢,相对来说层级不那么多,一会儿我拆组件的时候,你压力也没那么大,OK,哎,就是我没有必要非得把这写的特别复杂去绕你对不对?各位OK,好了,那看一下效果啊,打开瞧一下,诶控制台呢,也给它打开没啥错误对吧?哎,学校名称哎这个学生的一些信息,那同学你观察一下页面,那你觉不觉得红色框里边的就可以变成一个组件,诶蓝色框里的这些也可以变成一个组件,哎,那你就得给你的组件呢起个名字,哎有同学说老师这组件叫A啊,这组件呢叫做B,也没啥毛病啊,各位也可以,但是尽可能啊,你让你这个名字啊语义化一点,你比如说这个最好就叫做school组件,哎,你再比如说这个最好它叫做学生,对不让人一看这名字就知道你这组件是干嘛的是吧?哎就有点像着咱们说这个的时候各位,那你看这儿顶部这个。
06:00
恐怖,你看我叫啥,是不是叫hier OK,好了,来开始写写啊,回到代码当中,同学,那这样啊,我先把这个给你注掉,这是谁呀?VM啊说老师你咋注掉呢?我防止东西太多它干扰你啊,一会儿用的时候我再写呗,先给它注掉,哎,写好了叫做创建VM,各位别删,一会儿咱还用的对吧?那第一件事开始干嘛?同学,是不是你得去创建一个school组件呢?School组件那咋创建呢?哎,简单,同学,我让你创建一个变量A1,你是不是这么写呀?哎,那现在不是A呀,是啥呀,是school,那值肯定不能是一了呀,各位,一个特别重要的API出现了,你只要想在view当中去创建组件,你肯定得用它,哎,它的名字呢,叫做view,点注意啊,是这个view身上的叫什么名呢?叫做这个instant。同学,你对这词你肯定了解,叫instance是不是有继承的意思,但是注意它没有S叫instant,那这词什么意思呀,其。
07:00
就执意过来啊各位,他有扩展的意思,你瞧延伸延长扩展,哎哎说老师我就没明白他这API是啥意思呢?啊,等一会儿我去给你分析啊,它里边的一个原型关系的时候,你就明白了,为什么他要用这个词,现在呢,咱们先写着明白不?现在这一小节咱们就是来个基本使用,你管那API叫啥名字呢,人家作者喜欢就叫这个了,是不好,各位,它是一个函数要调用,并且你听我说调用的时候要传入一个配置对象,这个配置对象里边可以配置很多的东西,都是用于控制你这个组件相关内容的,诶那这个时候呢,有同学就紧张了,哎呀,说老师啊,会不会是这样呢?就是当年啊,我们在学这个view实力去创建VM的时候呀,你告诉过我得传入一个绿色的配置,对对象,这个绿色的配置对象里边有EL是吧,有data啊,有comp,有methods,有watch,有filter啊,有这个directive,说老师,哎哟,我的天呀,你说会不会你接下来给我讲这个粉色的配置。
08:00
对象里面又出现一堆东西啊,然后我还得去记啊,同学,不用了,你听我说,就是我们创建VM的时候所传入的这个配置对象里边的配置项啊,几乎所有的配置项都能在这个里边使用,就说白了吧,各位,原来你methods怎么配,该怎么配还怎么配,你的计算属性,你的监视啊,你的什么样式绑定条件渲染。同学,原来怎么写,现在还怎么写,OK,绿色的配置项和粉色的配置项几乎都是一样的,但是你看啊,我说的是几乎啥意思,就证明还是有不同的地方,如果真是异乎一样,那我就说完全一样了,我说的是几乎,对吧?各位还说老师,那这里边我写点啥呢?同学,你原来写啥呢?咱就先写了啥呗,把这一堆又拿过来是不是?哎,复制咱都说了吗?几乎一样粘过来,哎,舒老师,那这回我看看吧,啊,这回你一看呢,他就会报错了,没事儿,我们慢慢来啊,来走读读这个错误,他说什么呢?他说呀,这个配置箱EL仅仅。
09:00
你可以被使用在实力身上,并且是当你使用new关键字去调用的时候,人家说的还不够明白吗?人家的意思只有你写了new view,然后呢,你里边是不是得传入那个配置对象啊,人家的意思只有这个时候你的这个配置对象里面才有资格去写EL这个配置项,现在你没有资格写,人家的意思是你不是在创建组件吗?算了吧,不能写EL,老师为啥这我就不理解了,老师不写EL,我哪知道我为谁服务啊,那我剩下这些东西我就都不想写了,都没有意义啊,对吧?我忙了半天,我不知道我为谁服务,同学在这儿呢,就能把这个问题解释明白,就是为什么我让你看这个图,各位,咱就拿这个组件来说,你能不能告诉我他代表左边的谁,是不是代表左边的这个小家伙,是这意思不?哎,你看第三个组件里边下属的一个组件,是不是代表他同学,我在创建这个箭头所指的。
10:00
组件的时候啊,我并不写死,我说以后你就只能放在这儿,同学,如果有一天人家想放在这儿呢,能不能放也能放明白不?各位就是组建在创建的时候从来不说组建专门为谁服务,诶简单点说就是组建就是一块砖,哪里需要哪里搬,千万不要写死了,诶说我这组件我只服务于这个容器,那不行,同学你就定义好这个组件,不说你为谁服务,说老师,那最终我为谁服务呢?听大哥的呀,是吧,大哥不带着这一堆弟弟在玩嘛,对吧,弟弟们只要准备好东西就行了,大哥指哪儿就打哪儿,就这意思明白了不?所以说同学你看第一个区别发现了,VM是有资格写这个东西的,但是谁却没有呢,组件却没有,OK好,在这儿呢,一定不要写这个,哎,写一个注释吧啊,叫做一定不要写EL配置项啊,因为最终最终所有的组件都要。
11:00
被一个V管理,然后由谁呢?VM决定啊,服务于然后呢,哪个容器OK,哎,或者说的再明白一点啊,叫做组件定义时一定不要写OK啊,你先不用记啊同学,一会儿我上边都有总结好,那住掉了吧,你回来看,哎,你一注掉那个警告就没了,来又出现一个警告,他说什么呢?读一读啊各位the data option。啊,你data那个配置项should bea function同学不用再往后读了,就读到这就足够用了,人家说的非常明白,说你的data不要直接写成一个对象,要把你的data写成一个函数,函数里边去返回你真正想写的那个对象。同学之前我就给你铺垫过这个事儿,我说EL和data有两种编写形式,同学看这来打开EL与data的两种写法,对吧?打开这,同学往下看,往下看你看函数式是不是?哎,这个什么呢?对象式,那上边呢,我给大家总结的时候就是,哎,如何选择,以后学到组件时推塔必须使用什么呢?函数式,否则汇报错。同学验证这事儿了吧,那咱得说明白呀,它为啥会报错呀,它咋那么霸道呢?啊,为什么非得让我把data写成一个函数呢?我就写成一个对象,能咋的呢?哎,各位你一定要考虑好一个问题,你比如说啊,你成功的创建了一个绿色的组件school。
12:26
然后这个呢,是你整个页面,那同学我问一下啊,说你想把school展示到这个位置,诶行,拿过来用了,那你说如果有一天啊,你的同事呢,在另外一个页面,哎,也想用这东西,是不是也写在这儿了呀,那各位啊,你想想,如果你把这个data呀,写成了一个对象,那就意味着这个里边啊,其实是有一个引用关系的,什么意思呢?就是你在这儿用了这个school组件,然后里边不是school name是上硅谷吗?那你听我说啊,各位你把这儿这个学校名给它一改,比如说不叫上硅谷了,叫艾特硅谷,然后你同事啊就受不了了,你同事说,哎呦,我天什么情况呀,我这学校名咋也改了呢?那是因为同学你这边用的这一次和你同事用的这一次,最终最终咋的,他都指向一个对象,知不知道在内存里是有引用关系的,哎,同学,我用最通俗的一段代码去给你写吧,咱就这么说啊,说呢有一个data,它俩是一个对象,里边有A呀,是一啊,里边有B呢,是二,好了,各位。
13:26
你瞧着啊,然后接下来呢,我这么去写,比如说这个data呢,好多人都在用,你比如说同学这么写啊,Cost x1哎,想用这个data,那再来一个X2啊嘿,也想用,那你瞧效果啊各位,诶,我不用再打开了,这有了是吧?瞧着啊,我输出那个X1,同学里边是不是A1B2啊,X2呢,A1B2,那你看着X2啊,把这A呀改成了99,那其实同学你这GS要过关的话,你都知道这肯定也得变,对吧,那你看同学这不就是有一个连带的引用关系嘛,对不?哎因为啥,因为你这data直接写了一个对象,但你要这么写呀,它就不一样了,各位你瞧着我把这对象拿走,然后呢,Data有,但是data呀,诶,我写成一个对象的形式,OK,然后对象呢,能返回东西返回啥呢,就返回这个对象,OK,曾经你是直接写的data,就是一个对象A1B2,现在不一样了,得塔是个函数,函数返回这个对象A1B2,那这怎么写调用,这怎么写调用,那同学这回你再看我输出X1的时候呀,是这样。
14:26
S2呢也这样,但是现在优势就在于x2.a,诶,我给它改成99,那X2呢,确实是变,但X1呢,是不是不变?哎,同学你看巧妙的是不是把这东西就断开了呀,啥意思?你每一次去调用这个data的时候,它都给你返回一个全新的绿色对象,对吧?也就是说71行这次调用它给你一个对象,那72行你再调用呢,它又给你一个新的明白不?哎,每一次都是通过这种字面量的形式构建出来的一个新对象,OK,这回大家是不是就明白了呀?哎,一会儿我去给你验证啊,说老师,那要不咱们试试呗,就是先写成对象,完了一会儿看看是不是你说的那样,说这一变那也变,同学你没有机会去试是不?我也想带着你说在这儿立刻就试一试,说哎,同学们,咱们不写成那个函数啊,咱写成对象完了,看看一会儿是不是有一个引用关系,这边一变那边也变了,同学他不给你的机会呀,就说白了,你要是写的不是函数,直接不编译了,直接报错了是吧,走不下去了啊,还有就是各位你分析一下。
15:26
你说目前我定义的是不是学校这个组件,你说有必要带着学生的名字和学生的年龄吗?没有必要,所以说删掉最后个逗号也删掉,同学告诉我怎么写这块,DATA1定要写成一个函数的形式,并且data一定一定要写成普通函数哦,走里边怎么写written written啥呢?这个好了,缩进呢,调一下,OK,这不就写完了吗?回头来看,各位绝对不报错了是不?哎,那同学们恭喜你,你完成了第一步就是创建school组件,那么同学们知道我还有一个组件要创建呀,是不是那个student组件呀,那所以说走着吧,哎,那写上,我把这注释呢也给他拿过来,好叫做student,好,那里边这些东西我就全复制一份吧,行吗?各位,哎,就不再一点点写了,走,你那这个名字换一下,Student也是view点这句话就不说了啊,也是得有date有数据呗,哎,上硅谷北京昌平那来吧,开始同学把这两个拿过来,把它往这一替啊,缩进一。
16:26
条是不是可以了,哎,这VM千万别删啊,折叠起来,OK同学,School组件定义好了,哎,Student组件定义好了,说老师那我就用吧。诶同学听我说啊,你创建只是第一步,View当中你想用组件要分为三部是吧?哎,赵本山演小品说把大象放冰箱统共分几步是吧?那咱们就是没有中想用组件啊,那么拢共分几步呢?同学一共是三步,那么第一步恭喜你已经完成了,就是创建这个组件,那么第二步同学听我说就是注册这个组件,哎,注册什么意思呢?同学就比如说啊,你去那个营业厅啊,你去买那个手机号是吧?啊你比如说想办一张手机卡,你挑了一个特别好的号码,那同学你发现啊,紧随其后的一个动作就是这个营业员啊,得拿着你这个手机卡去给你注册到联通网络当中,否则打你这个账号就是空号,知道不?哎,所以说同学得有这么一步啊,叫做注册组件,第一创建啊,第二是注册,那么第三步呢,其实就是真正的使用了。
17:27
是吧?咱们开始进入第二个环节,就是注册这个组件,那怎么注册呢?哎,同学先给大家讲一个简单的方式啊,你把你的VM打开吧,走诶,撤回来啊,走,同学我问你EL写不写呀,必须写呀,同学你想想,这不写EL啊,Student里也不写,那不废了吗?啊,这不是大哥吗?这不是VM吗?不得管理着这个,管理着这个吗?他得写EL,但是同学谁不用了,Data不用了,为什么school数据在school里呢?Student的数据在student里呢?所以说你这儿呢,就不用写了,是吧?哎,那你得写一个全新的配置项,各位注意了,我说的是全新的配置项喽,叫做components,同学一定把这单词啊,给它记死了,如果你是学过react的同学,这个单词你不可能拼错component,诶,这个词的意思叫做组件,那么component什么意思呢?就是组建门,哎呀,同学想想咱们在写那个指令的时候,来在这儿啊,自定义指令的时候,在这咱写了一个配置项啊,叫做啥呀,Directives。
18:27
咱们在讲这个过滤器的时候呀,写了这么一个东西叫做filters,那么同理,现在你想配置组件,想告诉这个大哥,那这个VM它有几个小D,那你是不是得在这配置啊?哎,走,你各位里边咋写呢?里边是一组一组的KY6组合好了,同学school呢,只是在这你临时起的一个名字,接下来到了真正决定这个东西叫什么名字的时候了,如果你想跟这个一样的名字,其实你这么写就可以了,School,这个school指的是组建的名字,就一会儿你不得用吗?哎,那这个指的是什么呢?就是你那个组件在哪呢?思故就说白了,你可以这么写,同学,这叫A,哎,这叫A。
19:04
哎,是吧,你这样写也行,最终你那组件叫什么名?同学,组件名是在这定的,明白不?Components里面配置的一组一组的k value6那个K都是指组件名,说老师那刚才说白了,你写了半天,在这你写了个school,你像模像样写的,这不是组件名啊,可不嘛,那就是一个中转的变量,明白不?各位哎,你在这用A,我在这写A,那都行,哎,但是同学最好啊,你听我说这会也用school,这也用school,就是你在最开始就想明白你那组件到底叫什么名,因为你这么写有优势,各位咋的是不是简写形式?哎,那我偏要这么写,同学你看着偏要这么写,叫做学校,哎,然后在这呢,写一个school。对吧,我知道不好看,但是咱练一练嘛,这呢不叫学校,哎,这叫学生好,然后这是什么呢?Student同学,恭喜你组建啊,注册完毕啊,写好了叫做组件注册,或者这么说了叫做注册组件,诶这块是第几步呢?写好了第一步是不?嗯,这也是第一步,因为都是创建组件嘛,这就是第二步了,OK,注册组件,而且我跟你讲这属于局部注册,我哎,我一说局部注册你之前学的如果还不赖同学你就知道肯定还有啥全局注册,但是咱先不说啊,就在这儿局部注册好了,终于到了激动人心的时刻了,各位,我问一下啊,这是一个弟弟,这是一个弟弟,这是谁呀?这是大哥,那大哥呢,带着他们两个玩了对不对?哎,他叫学校,他叫学生,那么大哥发出这个指挥了,说咱们一起去服务,诶哪个容器注意看好了,哪个容器root容器那么好,各位来吧,Root容器里边你不要亲自写这些东西了是不?哎,那就给它删掉,那这呢也不要亲自写。
20:41
但是现在同学你面临一个问题呀,什么问题呢?你这里边儿如果不亲自写结构,我问一下school里边有结构吗呀。说老师是呢,同学回想一下组件的定义,组件的定义是什么?包含界面,局部功能,代码和资源的集合。同学,咱不说别的,就说一块功能最基础的几个组成部分。同学,CSS吧,确实咱没写,咱不考虑这玩意儿了,但是我问你同学,最基本的结构你是不是得有啊,就哪怕你没有什么交互对吧,没有什么一点按钮就弹窗,哪怕你连GS都没有,但是我问各位啊,一个组件最最基本的是不是也得有点结构啊,但是你看你这。
21:21
你把这删了,你把这删了,这里边是不是没有配置结构啊,是不,当时可能你没想到,但是现在你面临这问题,那怎么办呀,很简单呀,各位你把这一堆结构拿走,你记不记得之前我你分析生命周期的时候,我给你说过一个配置项叫什么来着,各位,哎,叫template对不?哎,最好用这个模板字符串这个引号,这样的话呢,你可以随意的换行,对不对?同学,这是哪个组件,School组件,那就把死school所独有的这两个H2是不是粘过来,那同学我们都知道,一旦你用了template,嗯,不好意思了,是不是得有一个根元素啊,所以说包个div,所以说里边一粘贴是这意思不?啊各位,那你这写了temp类的同学,这块是不是也得写呀?哎,写着写着你就会发现,哎哟,是吧,没有结构啊,来在这写一个逗号,那里边的东西也不言而喻了,写一个div对不对,把这里边的东西呢给它拿过来,嗯,同学,那分隔线呢,你不用拿,分隔线不属于这个组件,也不属于这个组件,就是属于里边的一个正常结构,OK。
22:21
好了,保存,那同学我跟你讲,直到现在你这个school和student才是真正有意义的组件,你看看有没有数据,有有没有对应的结构,有是不好了,折叠起来,嗯,那开始吧,进入最后一步,我是不是得用啊,那你看该删的东西我也删掉了,定义也定义完了是吧,创建完了,也注册完了,那我怎么用啊,各位看好这儿啊,叫什么名啊,学校第二个叫什么名啊,叫学生来看呢,这么用瞧好了啊,学校。哎,就直接写学校这标签说老师,那HTML里边没这东西啊同学,你写的也不算是HTML里的元素啊老师,那我写的是什么呢?注意了,你写的是组建标签,这就是我们所说的第几步,第三步步骤的步啊,叫做编写组建标签,好了把这个复制,诶不删啊复制然后呢,给它放在这儿,HR下边我写谁呢?那你也能猜到了,是不是写学生是这意思不OK,同学,这个时候你回到页面上,你去看诶怎么样是吧,能正常显示。同学,来借助5U的开发者工具来看看这个大哥VM是怎么带着这两个小弟玩的,各位鼠标放在这儿观察左侧是不是全选上了,啥意思?VM,这是大哥学校是上面那个学生是这个对不对?打开学校,你看里边有data,都是学校的信息,打开学生来走,你看都是学生的信息,是这意思不?哎,你在这点加呀减呢,页面都有呈现是不?哎说老师那我看看这个吧,你打。
23:49
打开因老师,咋啥都没有呢?没有就对了,兄弟,没有就对了,你瞧一下你的VM里面有什么吗?同学,你只有几个组件是不是?呃,你有自己的数据吗?没有,说老师,那我想有自己的数据啊,那紧张什么,写着呗,走同学,比如说那这里边随便配置点东西,配置一个MSG是吧?哎,叫做,呃,你好啊,对不好,舒老师,我想呈现到页面上,那你之前该怎么写就怎么写呗,在这来一个H1是不,哎,那怎么写差值语法,然后写什么呢?MSG可以吧?哎,说老师不对,你这怎么写成一个对象了呢?同学,创建VM的时候,里边这个data是不是可以写成一个对象,但是组件是不是不可以?哎,好,那说老师想做个分隔写呗。HR是这意思,不来回头看你好啊,打开VM有没有数据,有它有没有,有他有没有,有是不,哎同学验证一下,就是一个组件如果被使用多次,它们之间的数据是不产生干扰的,怎么验证呢?很简单。
24:49
你在这个学生下边啊,你再来个学生,哎,这时候你注意看啊,各位同学有几个学生,两个吧?哎,我刷新给你看一波啊走这是VM,哎,是不是两个同学体没体现出来复用是不是那意思?哎,同学,我只写了一遍这个组件,但是我只需要写两遍组件标签,那这里边所有的样式、结构、交互是不是就都能复用了?当然我没写样式是吧?哎,当然我也没有写什么交互就是一个简单的呈现,那你看着啊,打开第一个,我把年龄啊给它改成20,你注意看,走走同学是不是20了,我问你这变吗?哎,不受影响,你看还是18,就是因为啊你非常给力,你在这儿写成了什么呢?哎,函数式对不?哎同学,这个school,你看每次用的时候都是返回一个全新的,OK,这不就可以了,哎,主要是学生是吧,哎,学生这年龄每一次呢,都是一个全新的,OK,哎,所以说体会体会,还有一些细节上的问题啊,各位你看借助5U的开发者工具,你看看你这个学生的X是不是大写的。
25:48
啊,你这个学校的X是不是也是大写的,但是我在写标签的时候,各位你看我写的是不是小写的,其实同学关于标签这块大写还是小写,哎,是小驼峰还是keep case,其实这还有很多事儿,同学也就是说这个东西截止到目前还有很多的细节上的问题,我们没有去分析,OK啊,只是说简单用一用,那同学来吧,这别写的那么变态,我就想让他叫school,这只想让他叫student是吧,这也不想用两遍对吧?来把学校呢,School先拿过来放在这儿,哎,然后这儿呢也给他改一下,然后学生这呢,Student给他拿过来,诶写在这儿对吧,各位OK,你就完成了一个最基本的使用,那有些同学说说老师,那你这里边也没有交互啊,同学写呗,比如说在这儿啊,诶,回来在这儿我给你来一按钮,哎,叫做点我提示学校名,这不上硅谷吗?一点我就提示这个学校名,那你就可以写呀,同学来找到哪,只要是跟学校相关的各位都把它打开就可以了,同学是不是想写一按钮来在这写着button是吧。
26:49
哎,叫做点我提示学校名,可能有同学就问了老师啊,这结构就这么写呀,就这么恶心呀,这一点高亮效果都没有,我是不是得装点插件啊,各位你听我说不用去装插件啊,因为这种方式只是我们过渡的时候的一个写法,就是说白了现在学啥呢?非单文件组件,非单文件组件它就这样同学,所以说非单文件组件在开发的时候几乎不用,用的全是单文件的,但是它这里边呢,能让你学到很多它的写法,OK,所以说在这儿同学你就先忍着是吧?哎,在这来一个艾符,哎,Click给一个回调的名吧,叫做show name展示名字,那同学有回调名了,回调配置在哪?之前你这怎么写配置,像这里边还怎么写是不?各位哎,这里边加个人加个谁呢?配置回调是不是MYS,哎,里边写个啥收name,然后怎么写alert弹窗,弹窗谁this.school name是不是就可以了,来回头瞧一下效果,有按钮了吧一点,诶是不是弹窗这一片东西只要你。
27:49
还想再用一次,你就轻轻松松回到这个里边来,找到模板,只要把它再来一份就可以了,全套的东西是不是又来了一份,对不复用嘛,好了,回来我们把最后一个问题说明啊,然后这小节呢,咱就停,这小节呢,讲的时间也不短了,是吧?同学说一个问题,什么问题呢?就是关于局部注册和全局注册,好给大家演示一下,同学现在呢,我这个school组件和student组件都是属于什么呀,局部注册的,那这个时候同学你注意看了,如果页面上再出现一个div,诶叫做ROUTE2,然后呢,你看好了,各位我再创建一个VM,然后说一下它管理的是ROUTE2,然后这里边啊,各位你看着我不去配置组件啊,我可没说这个VM也带领着这两个弟弟玩的啊,这个VM只说我要控制二这个容器,但是我没有组件,也没有student,那就意味着如果你在这里边,你去用student,它会报错的,你看一下。
28:49
啊,回到控制台上,他说一个不知道的元素student,然后你看同学他预判的非常准,他说did you register reject the component,说你有没有在合适的时候注册这个组件呢?你看register是不是有注册的意思,你看人家猜的多,对呀,是吧,你用了一个student组件,但是呢,你没有注册,说老师那我注册一下呗,我照样写components,然后呢,老师我这么写,把这student给他拿过来,那你这么写肯定是行啊,各位你看学生又出来了,对不?那你看我这儿用到这个学生,那我这儿呢也用到这个学生,那我能不能咱说把这学生就定义成一个全局的组件呢?也是可以的,诶,那这样吧,同学,咱不破坏它,也不破坏它,诶我这么写,再来一个组件,创建一个什么组件呢?叫做hello组件可以吧,哎,view.a tend,然后呢,咱们再写点东西,那还得写这个template结构是吧?啊,那我就简单写写吧,各位啊,在这呢,我还是给你来一个根元素div,那里边儿呢,我写这么一个东西啊。
29:49
写一个H2啊,叫做你好啊是吧,感叹号,OK同学,这个组件可以写到这儿就结束说老师你这组件就是有个结构,对,连数据可能都没有啊,但你要写的好一点呢,你把这数据给它配上对不对?Data,走,那这里边写一个谁呢?Name,哎,当然了,你得return一个对象啊,里边呢,写上name,比如说叫做张三,换一个吧,叫做Tom对不?哎,你好啊,来这儿写一个咋写走是不是来一个这个name就可以了呀,原来怎么写就怎么写,OK hello组件定义好了,走你第一步创建hello组件,OK,给它折叠起来搞定了吧,那同学注意看了,这回我去注册这个hello组件的时候,我可不这么注册了,不这么注册了,我也不这么注册了,那我怎么注册呢?看着删掉这个VM,它不注册任何的局部组件,然后呢,我用这么一段代码,你瞧好了,各位这么写view点。
30:49
Component,注意不是component,是component走你传入两个参数,第一个参数什么组件的名字就叫hello,那接下来传什么呢?哎,传那个组件在哪?Hello这种方式呢,就是属于全局注册组件,它也属于第几步呢?第二步是不同学你这么一写不要紧,我跟你讲所有的VM啊都能用这个hello了,全局的嘛,是吧,来试试啊各位ROOT2我可没有注册局部组件,但是在ROOT2里边,那你用这肯定不行,你用谁呢?Hello对吧?各位容器二里边我用hello,并且哪我也用hello呢,诶在这我还用这个hello,再做个HR呢,分隔线,你看好了,同学走回来,那你好啊,Tom这会是不是也有借助开发者工具走你啊,Hello在这儿的啊,这个哈,在这呢是吧,啊你好啊to姆你好啊to姆都在这儿呢,这个你好啊,是我刚才我写的啊,这才是那个hello,这个呢,也是那个hello,是这意思不OK,各位,这叫。
31:49
全局注册啊说老师哪个用的多呢?同学你听我说,其实局部注册呀,咱们用的多OK,好哎,这一小节我们不去分析什么细节上的问题,就是一个基本的使用,来吧各位,我们总结一波吧,行吧,走维中使用组件的三大步骤,一叫定义组件,诶,也叫创建组件,第二步注册组件啊,然后第三步呢,就是使用组件,那怎么使用呢?你得写组件标签好如何定义一个组件呢?使用view.extend options创件,其中options和你new view的时候那个options啊几乎一样,但也有点区别,区别如下,一,Em不要写,至于为什么刚才给大家解释过了,是不是最终听从这个VM的这个分配啊。第二个就是data必须写成函数,为什么?哎,刚才也说了避免组件复用时呢,数据存在一个引用关系,哎,我也给你验证了,如果说school组件被用了多次,那怎么着?哎,你去改数据的时候不会说这块改了那块也改,对吧?备注就是使用template可以配置组件的结构,是不是之前我们已经说。
32:49
都过了啊,然后如何注册组件呢?有局部的,哎,就是new的时候呢,你传入这个components,哎或者是局部的是吧,view.components组件名,诶组件啊,那如何去使用呢?就是编写组件标签,OK,各位,这一小节我们只讲这么多细节上的事儿,我们不分析,常见的坑我们也不演示,都在下一小节进行说明,好,这一小节停。
我来说两句