00:01
好,从这节课开始呢,我们就要开始正式的学习啊,模板引擎的相关知识啊,那我们首先先来了解什么是模板引擎。呃,模板引擎呢,咱们先给他一个结论啊,它是将数据变为视图的最优雅的解决方案啊,最优雅的解决方案,所以它这里呢,就有两个关键词啊,一个是数据,一个是视图啊,那么实际上这个大家呢,呃呃,经常会遇见,那这个数据呢,一般是Jason形式啊,可能是数组,可能是对象,或者是数组和对象嵌套的这样的一种形式。那么这样的数据呢,很有可能是阿贾克斯啊服务器上啊,返回给前端的这样的一个数据啊,数据结构。现在我们要做的呢,就是要让它变为HTML的DOM结构啊,那这个时候你会发现每一条这个学生信息啊,Name age sex,对吧,这是三个学生啊,你呃,姓名年龄和性别都要给它变成一个力元素啊,力一力标签啊,当然PPT的这个呃,版面限制,所以我们省略了最后一个这个小墙啊的信息。
01:09
那你就会发现每一个学生呢,他这个力里面都有两个div,一个div它的类名叫HD,另一个div的类名呢,叫BD啊,那么呃,这块是他的名字小名的基本信息,对吧?然后底下BD里头呢,啊,就罗列了他的姓名,年龄性别啊,小名12男。好,那么这个力也是两个div,一个class是HD,一个class是BD,小红的啊小红是一女,哎,那可想而知,还有第三个力啊,那么这样的话,它就是从数据要变成视图,那同学们肯定现在脑子中想到了V-four对吧?哎,肯定想到了一遍V-four啊,那么实际上这个V-four这个东西呢,哎,它呢就是一种模板引擎啊,它呢实际上就是模板引擎,但是呢,可能啊大家呃,不要先想太高,咱们今天讲的这个模板引擎呢,叫做mustache musttae啊musttae实际上是啊,它叫小胡子啊胡子它这个英文名字,它这个模板引擎呢,并没有V-four啊看上去这么优雅,但是呃,在后面的课啊,就是下一节课咱们老师呢,会给大家去介绍,就是musttash。到底是应该。
02:19
呃,如何使用啊,我们先从马大SH的这个底层开始讲起,那至于V-four它到底怎么实现的啊,我们呃,以后在以后的这个系列课程当中啊,我们可以预告一下,会给大家去讲这个抽象语法数啊,还有这个。模板解析的一个原理,那咱们今天呢,但是呢,不管怎么样啊,今天告诉大家了,这个V-four实际上就是一种模板引擎啊,那你看是不是把数据变成视图是最优雅的一种方法呀,啊,最优雅的一种方法。那这个时候呢,咱们大家呢,不能说呃,身在福中不知福啊,这什么意思呢?就说在模板引擎被发明之前,世界到底是怎么样子的呢?诶,那咱们现在来了解一下历史上曾经出现过的啊,将数据变为视图的方法啊,将数据变为视图的方法。
03:12
那有这么几种?哎,那。它呢是优雅程度是逐渐升高的。首先呢,第一种叫做纯倒目法,第二种叫做数组照引法,第三个叫做ES6的反引号法,最后一个呢,叫做模板引擎的方法啊,当然模板引擎我们会着重用重要的篇幅去讲它的一个语法啊,咱们今天的模板引擎是用mustachsh啊,并不是V-for,但是呢,也是学习vuee的一个前提,就是通过massdash这个简单的库呢,能够让大家去了解到底啊,这个vuee的一个底层的模板引擎的一个主要的思路,对吧?哎,主要思路啊。好,那么现在的话呢,实际上大家能够看见的就是这啊几种这种方法,那么大家啊,其实满脑的问号,什么叫数交验法呀,什么叫反引号法呀,纯纯道法,那这样,那老师呢啊也把这块展开,咱们详细的讲一讲啊,咱们现在呢,分别去做案例啊,HTML网页的案例,分别去演示一下纯盗墓法,数字照应法,ES6的反引号法啊,然后你会发现它的优雅程度确实是越来越高,对吧?哎。
04:21
好,那咱们现在就去编译器当中,咱们写一写啊。行老师,咱们切换到编辑器了啊编辑器呃,咱们就新建了一个普通的HTML案例啊,咱们这几个案例呢,就不用啊这个web派和八派DV server来调试,就直接去新建这个HTML,简单写写就可以了啊好,那咱们先来看这个纯盗墓法是什么啊,那我们现在呢,就可以把这个数据复制过来。哎,这是老师提前准备好的这么一个数据啊,这个数据就叫它AR,那现在的问题很简单,就是我们现在呢,哎,这里有一个ul对吧,ID可以叫例子啊,这ul当中呢,是没有利标签的。
05:04
啊,那现在我们的任务很简单,就是把这个数据啊,哎,按这个咱们要求的那种形式,就这里就是力,然后里头是div,呃,每个HD对吧,然后BD,这BD里头呢,再来三个P啊这样的情况给它展开,那这样的话呢,纯盗墓法是最笨的啊,为什么笨呢?我写你就知道了,咱们首先呢,先去遍历这个数组,然后每遍历数组的一项的时候呢,就要用倒墓方法啊,用倒墓方法去给他,嗯,创建出。这个立立标签你明白吗?哎,所以说这里就是每遍例啊一项都要用盗墓方法啊去创建立标签,所以你看我在这里可以去创建这个立标签,怎么创建啊,Document create element是不是可以创建呀。对吧,没毛病吧,哎,然后创建的这个立标签呢,它里头可以写点东西,比如说inner text。
06:04
啊,Inner inner text OK。好,Text等于什么呢?哎,就可以等于咱们AR的第二项的内幕吧。啊,当然这里头东西呢,是很复杂的,它这里的东西啊,是啊,就是div,咱们先简单这么做啊,然后还要上述,因为你创建出来的是孤儿啊,你创建出来的节点,创建的这个节点呢,是孤儿节点,哎,孤儿节点,所以呢,必须要上树才能被用户看见啊,所以必须上述才能被用户看见,那这个时候我就可以先去得到这个ul,等于document get element by ID啊把这个例子的给得到。然后呢,我们再让这个list a pen child对吧,我们把这个O立给追上去啊,追加上去a pen child表示追加子节点啊,这个大家可能很少用了,因为大家平时在写vuee对吧?View程序啊,View是跟DOM是不相关的。
07:02
所以这个很有可能大家是平时是很少用的哈,这个没关系,好这个时候我们就可以打开这个网页看一下老师啊Vs code装了一个这个叫live server啊live server这个插件。哎,那大家也可以装一下。这个叫live server啊,这个小插件我们提一嘴。那这个脚下键装完之后呢,你就可以直接右键去open with love server,这样的话呢,它就能够打开一个虚拟的小型服务器来显示这个网页啊,并且呢,这个小型服务器还是热更新的啊,就是你写什么东西一保存这块呢,就立刻能够显示出来啊,不用刷新网页,挺好的,叫live server啊这个东西。或者叫live啊这个单词。好,那这样的话呢,你就会发现我们就把这个力给做上去了啊,那使用的方法呢,就是盗墓方法,为什么呢?我们是不是遍历这个数据数组的每一项,每遍历一项呢?我们这个时候就要用盗墓方法啊,盗墓方法去创建力标签,你可以发现这里的这个create element,对吧?Create表示创建element的元素,这是一个如假包换的一个盗墓方法。
08:11
对吧?哎,我们就把这个立标签呢,就能创建出来,好,然后这个是它的一个内部的文字啊,那这个时候你可以发现我们查看源代码,实际上这里是空的啊,但实际上呢,我们的JS在运行之后就会把这个力标签,哎给它做上去,那实际上这个每个力里面啊,注意看这个marker是新版的chome,它会把这个小圆点设为marker啊,这个不用管好,那实际上这每个力里面的结构是很复杂的,我们看一下PPT啊,PPT上面告诉你了要求的是这样子的。看见了吗?这样子的一个倒墓结构。啊,这样子的一个倒M结构,那这样的话我们就又需要用DOM创建HD,创建BD就很麻烦,对吧,所以这个时候没有内部文字啊,我们现在就要创建什么呀,HD这个div,所以就是AHDD啊等于document create element div对吧。
09:06
哎,要创建出来,然后还要给它设置类名class name等于啊,HD你发没发现非常的复杂对吧?非常的复杂,因为咱们平时就是一个v for能够循环展开的事儿啊,在这里就变得非常非常的复杂,然后呢,还要在这里写一个inner text等于什么呀,咱们看看PPT啊,谁谁谁的基本信息对吧?哎,那你还得去加上数组中的Di项的name,加上一个的基本信息这几个字啊,就非常的麻烦,那么更恐怖的是你这个HD div呢,也是一个孤儿节点。懂了吧,所以说它也得上述要让这个力去追加这个HD div啊,那也就是说我们的粒子的这个ul去追加OD,而OD呢,需要去追加HD divv,哎,那这样的话,你看他才把这个HD做出来,那同样的道理,我现在还要再去创建BD,你看。
10:01
对吧,本来V-four就能循环出来东西,但是在这里非常的麻烦啊,非常非常的麻烦,哎,然后呢,并且这个BD也是孤儿节点,我还得把这个BD给弄上去。啊,你你说这是不是很要命,然后这BD里头呢,还不是这么简单,对,这里头还要有三个P对吧?哎,还要去创建三个P,哎,那咱们就叫P1吧。P1,我们再去创建这个P标签,然后这个P1的内容是什么?P1的inner text是什么呢?咱们看一下PPT啊。啊,说的是姓名年龄是什么对吧,咱们就自己打了啊姓名,那这个时候冒号加上是不是AR中的D项的name呀。对吧,哎,然后这个P1是不是也得上树。因为你创建的是孤儿节点呀,所以这个P1也得上桌,就特别麻烦啊,BD的第五我们还得在aend child的一个P1是吧,哎,这个时候这个性命追上去了。
11:04
那同样的道理,我们这个时候呢,还需要P2。啊。和P3。好,P2是年龄,P3呢是性别,哎,H和S啊,那这样的话,我们就终于把这结构做完了,每一个力里头呢是一个HD,一个BD,而BD里头呢是三个P,对吧?哎,每一个里头呢都是,你看这个HD和BDBD里头呢,展开是三个P。所以你就会发现这个就很麻烦啊,尤其是大家用V框架,你会发现明明明咱们就如果是view在的话,直接写个例,然后V-for啊,明明就这么简单的一件事。哎,你要用原生倒去实现,那是很麻烦的。对吧,Create element create element1层一层的啊,一层一层的创建,并且呢,还有一层一层的追加。啊,那这个实际上是非常非常麻烦的啊。
12:02
那么实际上大家你会发现这个就是曾几何时历史上出现的数据变为视图的方法,那么纯动物法呢,确确实实是非常非常非常啊,笨拙。是没有任何实战价值的啊,可以说它的实战价值为零啊,那为什么老师还要给大家演示一下,因为没有东西比它更底层的了啊,就是说没有比这种东西就来的更加古朴啊,就是啊淳朴了啊,它是一种最呆呆的啊,憨憨的这样的解决方法。好,那我们这个视频呢,单独存啊,我们一会儿呢,给大家讲这个数组的这语法,相信大家诶满脑子问号,什么叫数组这一法啊好,咱们下个视频去讲解。
我来说两句