00:00
好,我们刚才呢,编译过这个,嗯,编译过这个文字啊,编译过这个普通的节点,然后我们现在编译一下文字,文字的话呢,我们现在肯定就需要一个正则表达式啊,呃,这几天咱们的课就是咱们的这系列课程呢,就老设计模板啊,那么这时候这个模板呢,咱们就以最简单的模式咱们来进行处理就可以了啊,就是咱们现在去写,呃,写什么的时候,我们就去把什么地方控制变量啊,把其他的地方变简单一点。啊,我们不再完成整合这个操作,但是有的同学说老师我们可以整合一下啊,咱们之前不是写了好多吗?对,可以啊,你想整合就整合,这都无所谓,但是呢,我们目的并不是说造一个vuee出来啊,我们的目的是通过自己手写能锻炼一些手写能力啊就可以了,好了,那你现在。发现这个文本匹配对吧,哎,所以说这块呢,就是文本是匹配了,文本匹配的话刷新。
01:00
啊,他说的啊,因为啊这里不是T,应该是no的,对吧,或者是。把这个text得到啊。T就等于no the text content啊,这样子的好刷新。刷新好,这个时候他就呃,应该是能找到,但是还是没有找到,没有找到是不是因为我们没有写双大括号啊。啊,这里写了一个双大括号A。啊,或者我们把这个A这样删掉刷新啊。嗯,你好,诶。但是确实没有看见。对,我们在这把这个node给输出一下啊。Noe输出一下,然后看一下他这是什么个情况,文本节点,然后文本节点当中的,呃,不是node,是T。好诶text,然后这个对吧,都有啊,你这个这个文字,然后三,但是它为什么这个正则没有匹配成功呢。
02:10
这个就很烦啊,你看这是没有匹配成功的这个,诶这个是true。对吧,这个是处啊,没问题,这个是true之后,难道他的note type就又不是三啦?这么诡异吗?在他的note看一下啊。你好,诶,这怎么是一了,这个值怎么就变成一啦。气死我了。这个值怎么就变成一了呢?这个note type。Node node type就是node node type,这个应该不是node,这应该是子元素。啊,这应该是子元素,我看看啊,我们循环循环每一个这个子元素child notes。好,然后如果它的note type是等于等于三。就是。这个这个你好A,然后它的这个地方它又变成一了。
03:04
这个就很诡异啊,这个就非常诡异,TT的T的content。啊,这个怎么突然间就变成一了,今天怎么写什么都不不顺呢。这个非常的诡异是吧,非常的诡异啊。看一看是哪错了,不要着急啊,哦,我知道了,是因为咱们这儿没有写递归,咱们这儿呢,多了一层。就这个数据多了一层啊,多了一层。多了一层,他没有写递归嘛,因为这是它的内部元素,这回应该对了吧,刷新。哎,这回文本匹配了,对了啊,因为我们没有写递归,为什么没有写递归,就是先一切从简啊,我们不要,我们就只先抓取这一层,然后这一层底下是不是还要再去构建那个fragment,是这样子的。啊,所以这回好了,这回文本匹配之后呢,我们就需要去编译文本啊,就需要把这个文本啊,那咱们现在就是self去叫compile。
04:04
叫compel text啊,我们把这个节点放进去,然后把这个当前这个正则表达式的这个。呃,DOLLAR1,哎,我们给他拿到啊,正则表达式的一个DOLLAR1。哎,给他给拿到就行。啊,就是拿到他这个补货的这个地方,那所以说就是我们要得到你这个word。啊,Word的话啊,或者叫name对吧,哎,Name就等于我们T,我们match,诶reg方号一就行啊把这个内幕传过去,那这个时候呢,我们就可以有这个方法,这个方法的话,第一个参数呢,哎,就是咱们刚才这个啊node,然后第二个参数呢,就是你这个name。哎,然后我们这个时候就可以输出。啊,输出一个AA吧,然后内啊,我们在这,因为控制比较乱,我们看能不能看见这个AAA能有对吧?哎,没有什么毛病。
05:05
然后这块呢,这个东西呢,就比较简单了啊,因为我们首先第一步呢,就是要去编写一个方法,这个方法呢,咱们就叫做啊,叫做get view view while啊,那把view的这个,呃,这个原型写在这儿,然后ESP写在这,ESP的话就是那个点点语法对吧?哎,所以我们首先呢,第一步是把这个,因为它要循环嘛,需要循环递进了啊,所以循环递进的话,就需要先把它设成一个值。啊,然后这个时候呢,要把这个ESP给他拆掉。啊,Split这个点给它拆掉啊,然后这个时候再按这个exp,我们再去for each。啊,我们这个时候他就有一个KK就出来了啊,我们再让这个VL等于VL的这个K这个代码,咱们之前实际上在呃做那个啊,咱们这个。啊,数据劫持的时候实际上已经写过了啊,就是要一层一层的把这个V对吧,一层一层的给它存进去,一层一层的存进去啊,然后这样的话呢,我们就可以拿到这个点风格的这个很深的这一层了。
06:12
啊,然后这块的话,我们就会让node的这个text的这个content对吧,哎,他就可以等于自己的这个get view value啊,我们的自己的Dollar vouee,这是它的一个原型,然后我们这个内幕要给他写过来,对吧,然后我们现在要添加一个监听。哎,因为你这用双大括号A了,所以这块是不是就在收集依赖,那等于说这块就是咱们那块的get。明白了吗?对吧,咱们就是之前咱们说数据收集的时候,可能大家不是特别了解,就是说什么叫get中收集一赖,就什么叫用的地方收集一栏,那么这里就是用的地方收集依赖。有没有发现我在编译文本的时候,这时候去创建它,当然我可以先不创建它,我可以先看他模板有没有出现啊,模板没有出现,模板报错了,因为这块是V。诶,看一下刷新。
07:01
好,这个模板并没有上来啊,模板并没有上来,那就说明这块还是有毛病,我们看看怎么回事,Node的text content啊,就等于这个V,这个VL难道有问题了。康log这个V啊,我们输出看一下。不要慌啊,这个VL已经啊有了,我们把它放进去,这是它返回的是这个啊VL等于不断的它的值对吧,一层一层的看这是不是写错了啊,便利便利这个K,然后让他这个没错。哎,没错没错的话,然后这边的话,这个值是什么,我们再输出看一下。诶再输出去看一下,然后为了防止这块乱,我们把这加个BB啊,为了防止他这乱。是这个十没错啊,十拿到了发现了吧。啊,咱们十拿到了,那么这个十拿到的话,我们由于是嗯,由于是写成那种模式了,它就可以这样写,就是B里的M里的N对吧,比如说等于七。
08:06
那这个已经可以B里的M的N了。明白吗?已经可以连续打点了,连续打点的原因呢,实际上就因为我们Li了对吧?哎,然后这个时候B里的M的N,哎,他就能得到这个七。大家可以发现,现在实际上是可以得到这个数字七的啊,但是他现在呢,并没有在页面上显示出来,但是这是怎么回事呢?这句话没有。没有上树。对吧,哎,这句话没有上述的话是因为我们把虚拟节点。对吧?哎,我们把虚拟节点现在给它就是编译出来了,那虚拟节点编译出来之后,现在是不是整个节点没有上树啊,对吧?哦,在这没有上树就是你刚编译完,然后你现在是替换好的这个内容要上树啊,所以这块就是Dollar EL,然后我们就child啊,就把这个fragment我们就给他上述就行。
09:02
好,那这样的话,我们刷新之后,你看这个气就上来了。对吧,哎,七就上来了啊,然后我们底下这个先放一个BR吧。哎,换一个行,那这七就上来了,这个七上来之后,但是这个七他现在不是数据数据那个监听的啊,你看我现在b.m.N加加。对不起,是VM的B啊好,那你看它是加加发现没有,它那个数据是没变的,这视图是没更新的,视图没更新的话,是因为我们在这是没有new这个water的啊,没有new这个water的,所以在这要去new这个这个这个这个这个这个water。啊,要把这个water给他给拗出来好吧,所以说他这呢就需要去引这个啊,不是new watch water是引这个watch。啊顶杠,因为咱们这多了一个这个watch。好,哎,就是observe啊,点JS。说了半天都忘了这个词是什么了啊,叫observe对吧?Observe就行啊,不过也可以直接用water。
10:06
啊,就是我我们去water,因为这个water的话,实际上它有一个好处,就是他这个里头是可以直接去监听某一个人的啊,所以我在这里就water吧。都一样啊,都一样,因为他不需要去收集依赖嘛,对吧,哎,我们就直接在这里就扭啊扭出来在哪了在这。哎,在这儿去引包。啊,然后给它扭出来就行,就是一切的一切就感觉特别的呃,特别的神奇啊,因为这个是飞轮效应嘛啊,你之前写过的东西越多,写过的东西越多,那么实际上你在这里啊,你你所感受到的他就就很神奇啊好了,那咱不废话了,咱们赶紧new这个water。啊,New,这个water new这个water之后它是三个参数啊,来target,一个production call back target是什么呢?Target就是啊这个啊实力,然后嗯,Expression就是这个name啊,然后回调函数是不是就是啊,我们这里要去返回给一个新的value对吧?诶那我这个时候是不是就要让node的text的content,是不是就要等于这个新的value对吧?这回它就监听了啊,咱们来看一下刷新,注意看啊,激动人心的时刻来了,走是不是变成八了,走是不是变成九了啊。
11:26
有没有觉得这一时刻就是特别的呃开心对吧,哎特别的开心啊是吧,哎,我们让这个你看这个这个值在这变化,他这就能变化。啊,那这个时候你你说做个按钮能不能影响他可以啊,但是这个时候咱们需要把那个指令系统给完善一下。啊,指令系统给完善一下,但是你现在比如说你随便做一个按钮。对吧,哎,按我加一,我们这个时候就是直接给它写个原生的啊on click对吧?哎,然后等于ad。
12:00
好,这是原生JS,那我们把这个ADD可以定义在底下啊,这个ADD,然后可以让这个VM的啊,VM的这个B的MN加加对吧?哎,那就是B的MN加加,那这样的话它就可以啊,你看点它这个数字是能加一的。对吧,哎,所以说他这个你就你就相当于啊,但是如果你要懵了,你就全蒙了啊,就这块儿,如果你要蒙了,你就全蒙了。啊,如果没蒙的话,你就觉得特别美啊,就是它这个water,只要一添加上视图就能更新。那么这个回调函数当中确实比较简单啊,我们只要让它的text content等于Y6就可以了,诶,好了,那么这个就搞定了啊搞定了那。这个就希望大家呢,能够自己写一写啊,你真的做出来,你会特别高兴的。
我来说两句