00:00
好嘞,各位,在刚刚这一小节呢,我们给大家呀,引出了这个人,就是mon的这个生命周期函数,并且呢说了一下它是什么时候调用的,而且呢给大家做了一个铺垫,就是viewu在帮我调这个mount之前呢,还调了几个别的函数,在调这个mount之后呢,也帮我调了几个别的函数,哎,简单说就是这mon的他不是在单打独斗,是有一群兄弟在陪着他的,那这小节我们就说说他这些兄弟们都叫什么名儿,他这些兄弟们都是什么时候被调用的,好吧,诶这里呢,我说一下各位,这个定时器啊,我确实没有关,因为现在呢还不涉及到去关这个定时器,你等一会儿呢,我把这个生命周期流程啊都说完了,各位我们再来聊聊什么时候关这个定时器呢,比较合适,好把这一啊就关掉了,那回到二里面,同学,我重新写一个案例,咱们去分析那生命周期一吧,就是热热身啊,在二里边我重新写一个,写一个求N值的那个啊,叫做当前的N值是。
01:00
然后写个差值语法,写上这个N,创建一个有实例,准备好这个N值识一,好下边呢,我再写一个按钮啊,叫做点我N加一,然后之前呀,咱们一直用那个简写的方式,对不对?Click等于完了N加加,这回换一下给它指定一个回调名叫做ID,说老师你这么写不麻烦吗?麻烦归麻烦,一会咱们好说事啊,在这写这个ID里边的事呢,很简单了,this.n来个加加,好,打开咱看一下效果啊走哎,是N来走OK好了,同学,你想研究最完整的生命周期,那么你最好参考官网,人家给你画的一个完整的图,在这儿呢,打开官网。找到学习里的教程,哎,在这里呢,有一个有实例,里边有一个生命周期图示,那同学这个图呢比较长,你现在看到的只是一部分,你往下再滚动,哎,走走走走,诶一直到这儿,我们会把整个图呢都带着大家呀,分析一下,哎,你可能就紧张了,哎呀说老师这图有点长啊,我能记住吗?同学分析完了之后啊,你就会发现很多的环节,我们了解知道就可以了,真正我们用的钩子就那几个,OK,慢慢来,那是这样啊同学,我不想疯狂的给你写那么多文字的笔记,你知道吧,还说哪个环节它是干嘛的,你还得看着笔记,还得看着图来回对特别麻烦,所以说啊,我做了这么一个事儿,各位我把官网的图啊下载下来了,然后呢,我利用这个图片呢,这个编辑软件给你画了一个新的图。在这。
02:36
诶,生命周期图,你发现我给你画这个图里面加上了详细的解释啊,其实你能分辨出来哪个是我家的,各位你看所有这些带有阴影的,你仔细看啊,带阴影的箭头,带阴影的蓝色框全都是我后加的,剩下那些不带阴影的全是人家官网自带的,OK,好了,同学,咱们慢慢来吧,我调整一下这图啊,让你能看到这个图的全貌啊,别紧张,各位慢慢来,我们这一小节只分析它挂载的流程啊来同学,一切呀,都是因为你写了这段代码,同学,如果你不创建view实例,那这个图就不用看了,是不肯定你得你用了一个,然后你注意了各位view view首先进行的一个动作呀,是这个,你读一读,叫做in events life circle啥意思?初始化事件和生命周期,说老师这个环节它干嘛了呢?我大概给大家说一下这个环节啊,它去制定一些规则,你就比如说那生命周期函数到底有几个呀,都叫什么名啊,我什么时候去钓他们呀,那都。
03:36
得在这定是吧?还有关于事件同学,我给你举个例子,事件修饰符你学过这个吧,是不是叫一次性事件,那也就是说他得制定规则,要说以后啊,如果我遇见这种点ones修饰符,我得怎么处理这个事件呢?都得在这儿去做好,OK,再读后半句话,各位,但数据代理还未开始同学,这句话很重要,那也就意味着在这个环节你new view时候所传入的那个data,比如说我刚才写那个N冒号一对不这个东西,同学,你听我说VM还没有收到呢,他身上还没有下划线date呢,那下划线date都没有,就更别说VM身上有没有那N了,你知道吧,各位,哎,其实这个图啊,就是一个慢动作回放,就跟你打喷嚏一样,各位可能一瞬间就完成的事儿,但是你拿那个高速摄影机,你去拍下来,其实也是有很多流程的,对不对,哎,所以说在这儿的同学数据代理啊,还没有开始啊,说老师那我明白了你呀,就把第一个生命周期啊给我讲完了,同。
04:37
觉这么说不对,我只是把第一个环节给你讲完了,什么叫生命周期啊同学,生命周期本质就是函数等着view帮你调,我跟你讲各位,这叫生命周期,这叫生命周期所有图里边用红色的框去给你写的,那叫生命周期,比如说你往下找,你会看到一个熟悉的人,谁a mounted,剩下这些东西吧,各位,那都是一个环节,你像这菱形块是什么意思判断对吧,各位他在给你描述这个过程,也就是说白了吧,各位,这个东西啊,我们只是哎知道一下,你想干预你也干预不了。
05:13
啊,它也不是什么函数,同学,谁家函数叫events and life啊,不是只是一个环节,OK同学,这个环节执行了之后,它马上就帮你调了一个函数,诶叫before created,这才是我们第一个生命周期函数,OK,读一下同学,在这个生命周期函数里面怎么的呢?无法通过VM访问到data中的数据,还有MYS中所配置的方法。同学,我觉得很正常,因为你所写的data人家连收都没收到呢,人家数据代里也没有下划线,Data也没有,人家怎么拿这些东西啊,但是我们得验证对吧?我们看这个图得是边看边验证,所以说各位回来在我的代码里面,在MYS的下边,我得写一东西叫before c,在这里面呢,我给你consolo做个输出,输出谁呢?它的名字首先得验证,它执位执行对吧?顺序对不对?好,回到代码中,找到咱们这儿打开控制台一刷新。
06:14
就你看before,哎,是不是调用了呀,来再验证,他说这里边怎么着不能访问到data中的数据和MYS中的方法不能通过谁呀,VM,那在这儿同学我是不是可以输出一下VM呀,Consolo谁呢?This,但是同学我给你个建议啊,你最好在33行,你加这么一段东西叫做debug debug啥意思?卡一个断点,同学,这才是一个最标准的调试方式,你只想分析到这儿,那你就让代码的执行停到这儿。也就是说什么呢,你别在这儿输出this呢,结果你这代码啊,刷一下把整个流程全都走完了,那不行,分析到哪儿代码就停到哪儿,OK同学你看断点已经卡进来了吧,嗯,那这样让它走下去啊,刷新一下,嗯,关掉吧,重新打开一下,嗯,保存,然后呢,重新打开,我得看到它输出那个this,刚才他没有输出this吗?好打开控制台呢,开好刷新,诶回到控制台啊,不用看这同学回到控制台输没输出VM输出了,你瞪大你的眼睛看啊各位打开他身上有下划线date吗?
07:17
没有,也就是说同学你所传的这个东西,你data人家根本就没有收到呢,没开始处理呢,而且你再观察同学他身上有VM.n吗?有那N吗?没有,你看强有力的证明了同学数据代理没有开始呢,那下划线date也没开始收集数据呢,你再看各位有那个method的方法爱吗?有那A方法吗?也没有对吧?各位,哎,而且你发现很多的东西啊,同学你看它都是none啊,或者是and,对吧?哎,就证明一切才刚刚开始,OK,各位,哎,放行,让它走下去,好,那我把这个debug呢就给它删掉了啊,那同学这呢,我就无需多言了,生命周期函数里的this全都是谁呀?VMOK,那把这个呢也删掉好了,那这个就验证完了,顺着图我们再往下走,各位来读一下这吧,什么意思呢?Init初始化,这呢,Injections activity啥意思?
08:12
说老师什么叫做注入响应式,哎同学翻译成大家能理解的是这个意思,在这个阶段啊,他也在初始化,初始化什么呢?你听我说最重要的东西叫做数据监测,还有数据代理。也就是说咱之前哎呀分析的view是如何监测对象变化的,如何监测数组变化的啊,给对象里的属性匹配get c啊,然后对那个操作数组的一些方法进行二次包装,同学都是在这儿完成的数据监测,还有咱们之前分析的数据代理也都是在这个环节完成的,他一旦完成了这两个东西,同学你看咋的就叫create,所以说你体会体会他对词的设计啊,各位before create啥意思?就在什么什么创建之前,那在什么创建之前啊,在数据监测和数据代理创建之前,那么create啥意思?创建完毕了什么创建完毕了呀,数据监测和数据代理,那也就意味着此时可以通过VM访问到data中的数据,还有methods中的方法是这样吗?我们试一下,回到这儿继续写,叫做create,照样啊,给它输出一下consolo,输出谁呢?这回叫做created,把它拿过来好先看一下顺序对不对啊,Before created created。
09:25
好,再验证同学输出谁呢?This,好,再走,给他来一个第八个断点,卡住保存回来啊,他在这你看又没输出那个this,你就把它关掉,然后回到这儿再重新打开,走好控制台呢,开好刷新一波回到这儿啊走着同学是不是卡进来了,这个时候你看看这个VM啊,身上居然有了那个的方法,然有了那个N,居然有了下划线date你看也有N了,并且你看N的get是不是都出现了呀?哎,你看同学数据监测是不是在这儿体现的,那数据代理呢,是不是在这体现的?OK好了,放行,让它走下去,顺着图呢,我们再往下看,同学接下来这呢,就有很多的判断了,我们一点一点来,各位每一条线我都会带着你走的啊,我放大一下,大家一起看,首先啊,他问你一个事儿,说你有没有EL这个配置项,Option不有选项配置的意思吗?他说你有U的时候传没传EL这个配置项,同学回来看我们的代码,我传没传EL传没传,传了。
10:25
完了往哪走,是不是往这走,哎,走这条线,说老师那这边呢,一会儿我再带着你看呢,来同学又问你了,问你什么。问你有没有template这个选项,同学,这东西啊,我好像真没跟大家说过,咱也没写过是吧?老师写过,咱之前在这儿写过,你给我讲那个条件渲染的时候呀,你说那个if的时候啊,你不写了一个这个吗?各位,这叫template标签,人家这个里边说的多明白呀,叫template option叫选项,人家说的意思是你在new view的时候有没有传入这么一个配置项,叫template,咱别说传不传,连讲咱都没讲过,对吧?各位,哎,所以说给他干掉,那同学,你知道这得往哪走了。
11:06
嗯,有没有啊,没有没有就走哪是不是走这条线好了再往下看,各位你先别看右边啊,再往下看,同学来了,重点来了,这词什么意思,编译编译什么。E。对吧,EL是什么意思呢?就是EL的什么什么东西,那在这同学读aler HTML啥意思,外部的HTML那连起来念就是编译EL的外部HTML就作为template啥意思?模板说老师这啥意思呢?这里边啊,同学很细节,我跟你说一下啊,是这么回事儿,我问你我的代码里啊写了一个EL,你说我指的是谁呢?EL井号road是不是指整个红色框的这些东西啊,是这意思不?各位,然后你再看它官网里面那个描述啊,说EL的al atl,这个al怎么理解呢?哎,是这样的啊,各位route啊,指的是你整个这个div。
12:02
然后他如果说inner是什么意思呢?如果啊,他说的不是aler,我说如果啊,他说的是aler,那如果他说的是inner啊,我跟你讲各位,他指的就是红色框,但是他说的是al,那你知道al指的是哪吗?就是绿色框,其实说白了各位就是到底是div root里边红色的是模板,还是说整个div它都是模板,你必须得叫这同学,我告诉你,你要是直接写EL wrote,人家指的是什么呀?就整个绿色框的,咋的它都是板,包括外边那个div,怎么证明呢?各位,很简单,你看着我把这断点先干掉,把这网页啊,我先给它关掉,回来我这么验证各位,如果绿色的不算模板,只有红色的才算模板,那就会出现这么一种情况,你看着啊,我在这儿呢,写一个冒号X,我是不是使用那个V杠半的,再绑定一个X属性,它的值是什呢?是这个N,你看一下各位啊,如果说这个。
13:02
东西不算是模板,那我问你最终它出现的其实就是什么冒号,X等于N不会解析的,但如果说这块也算作是模板,那你能看到是X等于一是不,各位好了,保存打开我们看一下效果呀,你就明白了,各位检查,然后你看一下诶同学咋的,是不是也编译了,也就是说各位怎么着,整个这个div都算作啥呀,所以说你看人家说这al是啥意思,就连那个div那个标签都算,然后就作为什么了,各位往后读,作为模板。啊,也就是说模板是肯定得有的啊,如果你不写模板这个选项,那就是EL说的是哪那哪就作为模板了啊OK,看这同学一个最重要的环节又出现了,叫做此阶段又开始解析模板了,就你写的什么差值语法啊,艾符click呀等等,就那些东西同学就都开始解析了啊,什么你的计算属性啥的都都开始执行了,然后呢,同学你看生成了什么呀,虚拟do姆我写了个括号,内存中啥意思?虚拟do姆各位它在内存里呢,对吧?来,你读红色的字儿,页面还不能显示解析好的内容。
14:07
同学,我觉得很正常,页面不能显示解析好的原因是这个东西还没有变成真实盗目,我连往页面上放都没有放呢,你说对吧,说老师那不显示解析好的内容,那显示啥呀?各位,很简单,你回来啊,你看这儿,我把整个这些代码全都注掉行吧?各位,也就是说view并没有开始工作,那同学你说这个网页它长什么样呢?它一定就是这样的,而且你那个按钮啊,你看里边的东西没人给你解析,艾福click等于A是不是都在呀?同学,这是什么呀?这就是没有经过view解析的,哎,这么一个模板。OK,说老师那维要工作呢,View要工作呀,就是这么一个流程,同学其实有一瞬间呀,这些东西呢,会出现的,但是他执行的速度极快,也就是说这个东西啊,它刚要放到页面上去,哎,然后马上view就开始介入了,然后就拿到这里的东西,然后就开始解析,最后呢,把解析的玩意儿诶又给他放回来了,OK,好了,我们顺着这图啊接着往下说,各位,也就是说呢,到了这一步,整个这个大圈走完啊,各位你先别考虑别的线,一会儿我单独开视频跟你说别的线,OK,也就说这个大圈咱们走完了之后,同学其实谁已经出现了虚拟盗。
15:20
但是转成真实盗目了吗?没有页面能显示解析好的内容吗?不能说,老师,那你咋证明呢?嗯,很简单呢,各位你看着就在这,这是不是有create的,那created在哪呢?同学,你看好这个图啊,Created是不是在这呢?同学你说如果我把断点卡在这,那意味着什么呢?意味着它压根都来不到这个环节,你说是不啊,那这卡的就有点早,那你再往下看,各位,诶这有这么一个before mount mount是不是就挂载各位。啊,那before amount啥意思呢?就是将要挂载,或者说叫做挂载之前,然后你读一下,此时怎么的呢?读一读啊,页面呈现的是未经view编译的do,哎,那咱们就测试一下同学把这写上啊,Before mount就啥意思呢?各位你得让它编译完了这个虚拟do,然后你在这儿卡住,然后才能说明问题,哎呀,确实有虚拟盗墓,但是页面呢,还呈现不出来,你在这儿卡吧,各位卡的有点早,不足以说明问题,OK,回来开始写在这儿再来,那这个呢,给它删掉,再写一个啊,还是before,这回叫做before mount,哎,然后在这儿呢,来一个粘过来得了啊,把它复制走,Before mount写在这儿,好,同样的呢,我输出这个this来,再来一个第八个给它停掉,好,这回看效果啊,各位回到这啊,那我把它关掉,得重新开啊,要不它不一定好用来右键打开。
16:44
控制台开好,你得刷新啊,同学不开控制台断点卡不进去的啊,来刷新走卡进来了吧,各位不用看别的地方,看页面,看页面同学你看这N是不是没人解析,而且啊,你可以在这看的更明白,打开这个div,打开这同学看这里边的东西,瞧瞧是不是都是未经解析的呀,实际上各位view已经解析完了,但是没来得及往页面上放呢,因为你把一切都停在了这before mount它走不下去了,对吧?各位,所以说删掉删掉好了,就着这个图我们再往下看,同学来到了这个环节啊,你读一读,叫做创建一个VM身上的Dollar for EL选项,然后替换掉整个EL啊,就是用它啊,直接过来就是用VM身上的Dollar EL掉整个EL里边的东西,也就是你那个容器里边的东西说,老师,这个Dollar服EL是谁呢?你听我说一下,各位,就在这一步,View把刚才生成的虚拟道母就转成了真实道。
17:44
转成真实盗墓之后,他往VM点刀了,EL身上存了一份,哎,就说白了,各位view呢,很聪明,他把这个虚拟盗墓变成真实盗墓之后啊,他不是傻了吧唧的直接给你放到页面上去了,哎,然后他就不管了,他自己偷偷的存了一份,在哪儿呢?VM身上的Dollar服em这个选项上啊,随后各位他进入了这个我们曾经用过的mount的,什么意思呢?叫做挂载完毕,你看读一读,此时页面中呈现的都是经过view编译的do,对不对?哎,说老师,那这个咱没看呢,说什么所有对DOM的操作最终都是不奏效的,行,那来咱看看同学,咱把这也看一下在哪,在before里面所有对do的操作都是不奏效的,你注意我的用词啊,各位,我说最终都是不奏效的。
18:32
什么叫最终呢?来我们测试一下各位,我呢还是让一切都停在这里,然后呢,我这样做各位,页面上有一个H2吧,行吧,各位,我就不给他ID了,一会儿直接写原始的到我们操作去玩它啊来看着打开。走空台打开断点卡进来,各位啊,这里边写的是不是当前的N值式啊,哎,瞧着同学现在卡进来了,接下来呢,我去操作DOM,我首先拿到H2,我用最原始的方式啊,document.query select拿到谁呢?那个H2拿到它之后了吧,我这么做点儿inner text给它改成啥呢?哎,咱就哈哈吧,提示出来了,同学,我没敲回车呢,我敲回车走,你来变没变,变没变,变了说老师,那你这说的是什么话呢?你说都不奏效,我说的是最终都不奏效,什么叫最终啊?同学,你敢把断点放下去吗?你一旦放下去。
19:29
咋样,这叫最终吧,哥们儿,最终都不奏效,老师,为啥不奏效呢?同学,你琢磨琢磨这个流程,你把事情停在这儿了,然后呢,你去操作盗目,哎,你改了页面也有效果了,但是紧随其后,我问各位,人家是不是执行了这一步啊,你刚才无论怎么改的盗母,人家这边就把这一步的虚拟盗墓拿过来,咔一下就生成真实盗墓,一下就往这个Dollar符EL上存一份,随后就插入页面了。同学们,我想问的是,就刚才你对盗墓不管进行了什么样的操作,人家最终都是把这个虚拟盗墓对应的真实盗墓给你插入页面了,哎,就一种感觉,你在这儿对盗墓进行什么操作都是自娱自乐啊,可能一瞬间有效果,但是紧随其后就废了啊,刚才吧,我给你卡了一个断点,你看的哎,可能感觉哎老师有那个流程,如果不卡断点,各位你瞧着啊,document.query select,然后呢,我正常写拿到什么呢,那个H2完了呢,点in。
20:29
完了呢,我给它改成这个,哈哈,完你自己去看啊各位你来到这儿就断点不卡,你都看不到那个过程,你看走走同学,你能看到这有个哈哈,然后瞬间又变了吗?速度极快的,你看不见,哎,所以说同学不要在这里边操作盗墓,你操作了也白操作,是这意思,不好给这个删,删好保存回来顺这个图呢,我们再往下说,哎,各位一旦把真实盗插入页面了,那就直接帮你调这个了,叫做mounteded,哎,Mounted就是挂载完毕了,咱之前说过对不对?来读一下,此时呢,页面中呈现的都是经过view编译的do,刚才是未经编译的是吧,来吧,开始验证,往下写,叫做mounted,好呢,把这个conslo呢给它拿过来,在这呢,来个mounted OK,在这呢,照常输出这个this,然后呢,还得做这件事儿,第八个断点卡一下保存好了,同学新开一个啊,原来的不要关掉,关掉空台打开刷新卡进来了吧,注意各位看。
21:29
界面,你看看这都是什么,当前的N值是一,不再是双花括号N了,而且看这的同学右键,哎,这右键不了,那来到这儿吧,一点点打开wrote里的同学,你看所有的东西都解析完了,你说对不?哎,回到图里,你瞧瞧都是经过view编译的DOM,然后呢,再读第二句,同学,这个时候你对DOM的操作均有效,但是尽可能避免。啥意思呢,咱说了嘛,用了view就尽可能减少自己操作盗墓是不同学你觉没觉得,如果你在这一个阶段啊,你去操作盗墓就有这么一种感觉,你让view先去忙,View忙完了,哎,把那一堆真实盗墓挂到页面了,反手你就把人家改了,那所以说同学这个时候你操作盗墓肯定是有效的呀,但是尽可能我们要避免,对不怎么证明它有效的是吧?来同学很简单啊,在这儿呢,你还把刚才那个代码啊,你给它拿过来啊,Document点2QUERY select拿到那个H2,然后还是改它里边那个inner text,我给它改成啊123,你看一下各位我不卡断点了啊,放行走下去,同学刷新,你看你看对盗墓的操作有没有效,有效,哎,但是尽可能啊要避免,哎删掉这个呢,也删掉好了,顺着图呢,再往下说,同学你看,读后半句话至此,哎,读初始化过程结束了。
22:45
也就是view啊,忙完了整个初始化的过程对吧,拿到模板呀,解析啊,怎么怎么样,然后读,一般在此阶段干嘛呀,开启定时器啊,哎,发送网络请求啊,哎,订阅消息呀,绑定自定义事件呀,当然同学这个我们还没讲,这个我们还没讲对吧?发送网络请求其实在这就可以发了,哎就有一种感觉,同学先让view去忙对吧,忙了半天之后呢,页面先让他有结果,然后呢,马上你去发送网络请求去,哎,你该获取什么数据,再获取什么数据,你说是这意思不对吧,各位,哎,所以说你看把整个初始化的流程呢,我们就说完了,当然同学这里边还有几条线我没有说是吧,你比如说这条线还有什么呢?这一条线那咱们就说说呗,各位首先说说这条线,如果我没有EL,那怎么办呀?来各位,接下来你瞧好了,EL助调同学,我们之前聊过,如果你不写EL,那V就不知道他为哪个容器服务对不对?回来说,老师,那怎么办呀?你读呗,走no这条线,他。
23:46
说当VM.dollar mount调用的时候,哎,我再往下走啥意思呀,各位,这不就是咱们之前讲的API吗?说老师那要是这样呢,我没有EL,诶我还不掉这个,那你看一下吧,各位啊,回来这样我先正常写,你看一下整个流程啊,一定是before create created before mount mounted,你看一下啊来回到控制台,你看是吧,如果说你不写这EL同学,哎,那就热闹了,你看一下吧。
24:14
Before create,然后create就没有后文了,那你看不就应该停在这位置吗?Create掉完了,到这不走这儿,也不走这儿,那就停下来了,后边的逻辑就没往没法往下走啊,而且你看一下页面,各位你看全都是未经解析的,这很正常吧,这东西直接跑到页面是太正常的,我又不工作呀,是不好了,回来,那如果说我把它掉之后,同学我要调那个Dollar mount呢,很简单,咱们这么测试一下VM我握在手里了吧,来吧,各位你瞧着,回到这里边刷新,你看直走到before create和create,那接下来如果你VM.dollar服你掉了这个mount,而且里边你说好了服务的这个容器就是RO,那这个时候你注意看啊,各位走。解析了吧,哎,那你看看before mount mounted是不是走下去了,这不就正是图里所说的when这个东西,Is called啥意思?等你去调用的时候,那同学这条线我是不是说完了再说另外一条线挺有意思的啊,各位叫做templateate template什么意思呢?叫做模板,它的意思是如果你有这个模板,我就要走这条线,那么这个选项啊,我没有跟大家说过,现在呢,跟大家说一下,同学这个东西有什么作用呢?来,你瞧着啊,就是容器里边啊,各位你听我说,容器里边我可以什么都不写。
25:34
这个容器是空的,说老师那容器是空的,那没有模板呀,对吧,我把什么样的结构变成真实盗墓放到页面呀,诶瞧着就靠这个template,那这样各位这VM呢,是刚才我为了演示问题,所以说不要了,这EL啊,我也给他写着,你看着我写这个template template的值呢,就是一个字符串,然后你把那堆结构啊,你给它粘过来,说老师那咋报错了呢?我说一下啊,各位如果你这结构啊不换行对吧,你不嫌恶心,一行把它写完,它是不报错的,你看就这结构,但是更多的时候啊,我们喜欢换行,如果换行各位你就得用ES6里边那个模板字符串,就这东西去写了,OK,你要是能忍住这恶心,老师我一行能写完那行,哎,你但凡忍不住,你就得用这个去写,同学写了这个,你可以不在容器里写东西了,那他的工作流程就是拿着这个东西就当模板了,就直接解析啊,生成真实道呀,然后诶走这环节,最终来个绿色的箭头,还是给你放在这里边了,明白不,各位。
26:34
哎,说老师,那我试试吧,保存来回来看看效果吧,来到这儿呀,同学读咋了?读一下模板编译失败啊,为什么呢?各位你看这就可以了,One element,一个根元素,它的意思就是如果啊,你直接使用temp这个配置项,那么就意味着各位你不能有两个根节点,你瞧一下各位,我给你换个行,你就明白了,我有个H2,我还有个button,同学,所以说你读一下这段结构是不是有两个根节点,或者说有两个根元素,一个是HR,一个是button,哎,说老师,那我得怎么办呀?同学拿过来啊,在外边啊,给它包一个div。
27:16
哎,然后在div里边啊,各位你把你那真正的东西啊写在这儿,你瞧HR button这回保存回头看,嗯。也是可以的啊,说老师就说了半天,原来我这容器里边也可以什么都不写呀,原来那个模板我可以靠这个配置项去玩啊,那可不,哎,说老师你早告诉我呀,你告诉我我是不是早用这个了,同学现在在这儿用这个还为时过早,你知道为啥为时过早吗?因为这堆结构,同学你就告诉我是这么写舒服还是直接写在这里舒服?你这样的话,同学他一点提示都没有啊,你说对吧?哎,所以说一直没跟大家说啊,还说老师还能这么玩,是的,还有一个细节上的问题,同学你注意看啊,就是我把这个拿走,我正常往容器里边啊,我写东西,但是我不用tempate这个配置项,这时候你看着啊,各位那个XN你注意看效果啊,我写了一个div啊,里边是HR和button啊,ID呢,是你看一下最终的结果啊,右键检查。
28:16
同学,你的root容器还在不在啊,Root在不在在哎,而且root里边这个X啥的是不是也解析了呀,里边东西是不是也正常的,好,这是直接把模板呀,写在这个容器里,如果你要是不写,哎说老师容器是空的,我靠这个那你瞧好了,各位啊。效果是一样的,但是你仔细观察同学,谁没了谁没了,那个div root是不是没了呀,也就是说各位他俩是有点区别的,如果你写成这个样子,它就是把整个绿色框的东西完全替换掉,你整个红色框里的明白不?哎,就你这再写X啥的,那都白写了,OK。啊,就是这么回事儿,还是有点区别的,同学,我们目前呢,不去用这种方式啊,你等一会儿讲到组建的时候,我们再用一用,在这儿呢就知道,诶有这么一个方式就可以了,那就把它煮掉,那里边的东西呢,拿过来我还正常的呀,往这儿写好保存,那来吧,同学把这条线是不是也走完了呀,那读一读吧,这条线里边说的是什么呀,编译这个模板到一个render函数里面,哎,它里边呢,有一个render函数专门负责渲染的,哎,所以说你看这两条线呢,还是有点区别的,但是实现效果来说都是差不多的,OK,各位,一个是直接把那个容器里边,包括那个容器就都作为模板了啊,那这个呢,就是你说谁是模板谁就是模板,最后我把整个root都给你替掉,OK好了,哎,那我们就把整个挂载的流程啊说完了啊,也就是说这个区域。
29:43
整个这个区域里边的东西,我们是还没有说的,一会儿再说,OK,这小节我们。
我来说两句