00:00
好,我们把这个指令实现实现啊,咱们重点咱们就看看这个,呃,双向绑定的这个指令,对吧,这个VGA model啊,这个指令,因为VGA model算是一个比较有有特点的这样的一个是吧,哎,一个指令啊。老师嗓子有点哑啊,大家见谅啊,可能偶尔会清下嗓子啊,大家见谅好,然后呃,我们现在呢,就要看一下他这个指令,指令的话,我们现在基本上就是在这个,嗯。这个这个里头已经开好这个头了。对吧,哎,那这个water water的时候,肯定这块肯定就需要new一个water water了啊好,然后还是榜,对不起,这是self啊,这是self吗。嗯。啊,最好是备份一下啊,这个防止有问题,然后这里呢,是self的Dollar view对吧?哎,这样子的监听。啊,然后。啊,就是EP,就是我们的这个表达式,哎,就是你这个啊,你这个,诶他这ESP还没得到呢,是吧,哎,我们现在还得把这个ESP给得到啊,就是这个value吧。
01:10
就是八六。好,然后这个value的话,然后呃,接下来就是它的一个回调,回调的话,这个回调就非常的简单,是不是就直接让他的value就等于这个新value就行。发现了吗?这样的话他就能够去绑定了。啊,这样的话,他就是完成了对这个数据的一个,呃,一个绑定,对对他的一个监听。但是现在的话,你界面上什么都没出现,这个这个这个数字也没写进去啊,这是为什么呢?这是因为我现在的话首先要先得到这个值啊,这个值的话我们叫V,那就是呃,自己的刚才不是有一个函数叫get view value吗?啊,我们把自己的Dollar view放进去,然后把表达式。哎,把这个表达式啊。哎,表达式给它弄进去啊,这个表达式这表达式呃,放进去之后,然后接下来的话,我们就可以让node的value就等于这个V,那这样的话,你看这个十是不是就填进去了,所以双向绑定的第一层绑定就是这个V-model a是怎么填进去的。
02:16
啊,实际上就是这样填进去的,哎,他就是通过这种很细的这种指令操作啊,在这里肯定要操作盗M了,就是VI,他不会让咱们的开发者去操作DOM,但是他的底层一定要操作do呀,对吧?哎,如果他的底层不操作到,那谁操作DOM呢?好,但是呢,我们现在改变这个十啊,比如说我现在双向绑定是啊VM的A。对吧,或者VM的b.m.N好,那这个时候你会发现就是这是七,我改变这里头的值,它没变呀。对吧,改变这里的值他没变那怎么办呢?对,我们这个时候就需要再次添加,给他添加监听就行,所以我们就给他艾even listener啊,这个你没有听错,就是我们要去给它绑定监听,就是input啊,然后这个时候我们就可以得到它的值,首先这个新值呢,我们就管它叫new new value啊,它就等于你这个元素的value。
03:13
对吧,哎,然后你可以alert这个new value啊new value。哎,这样的话,你在里头输入东西的时候啊,它就会弹出东西发现了吗?然后是不是你就才思如泉涌了,对我们是不是就可以给他去设置这个值了。明白吗?就可以去设置这个值了,但是我这没有没有那个set函数。啊,我这里应该再去定义一个叫set的这么一个函数,因为set函数就相当于是get的函数的反面,那它是不是能把这个点给一层一层射进去。明白吗?他刚才这是按着点一层一层找回来,我们现在要能把这个按着点一层一层设进去,所以说我们就给他再来一个叫view表达式,然后值这块多个值,因为你得不需要值啊,设需要值。
04:02
诶,然后写法其实跟这个非常类似啊,就是让exb等于它也是,然后也是便利,便利的话呢,这块要迭代两个,一个是K,一个是序号,为什么?因为你设置的时候它是跟那个序号相关的啊,然后为什么?因为他这要判断是不是最后一个,就是如果说你这个序号是我这个表达式的,呃,最后一个啊,就不是最后一个,那么这个时候我就让它等于上一呃下一层的K。那他就一层一层找下去了,对吧,否则的话呢。对吧,哎,我就让你这个值的这个呃,K就等于你传进来的这个value,因为你不是要设置值吗?最后一层要设置成T,而之前的一层一层的找下去,然后它没有return值,就相当于我现在双向绑定B的M的N,那它是不是要先找到B,找到M,最后再找到N,等于说最后落脚点是这个N属性啊,这个N属性的。N属性的值呢啊,就会被设置成这个value这样难,那所以说我们在这里呢,就可以去试验一下,但这个函数老师不知道他有没有写对啊,那这个函数啊,老师写的肯定比你们熟啊,这个就是经常也会去写啊,所以说你们你们肯定就会觉得说老师你怎么写那么快,因为你们的基础一些算法啊,可能并没有达到那个地步是吧?哎,这样去啊,就设置就行,然后再让他等于我这个新值就行。
05:33
好,我们来看一下刷新啊,这个时候报错了啊,V v l is not啊这个是。嗯,V l is not,发这个是V对吧?哎,这个V啊,好刷新,诶,这回OK了。对吧,哎,就相当于我们现在在设,但是这个值没有变啊,没有变,没有变的话是呃,没有变的原因啊,不要着急啊,我们看一下添加监听。
06:00
添加监听的话呢,我们等于说是要去设置这个view,我们要去设置这个表达式的值。对吧,哎,这个Y6Y6实际上就是这个a drl的Y6啊,表达式的值,然后设成什么呢?设成你这个心值。所以这一步是非常关键的。哎,我们要去设个新值,然后设个新值之后,嗯,然后就看这块了,就看这块有没有变化了,Set value。啊。你传进来的view,然后我们split,然后我们先for each。啊,他这是一个,如果它小于最后一个,因为这个老师写过很长很多遍啊,所以这个应该不会错。啊,我们就让这个哦,这块错了,这块是V不是value啊,但不能改变这个参数对吧,一层一层叠下去,然后这个是value啊,这块写错了一个词,咱们来看一下,注意看啊,很神奇,怎么样,双向绑定是不是实现了。对吧,诶双向绑定是不是实现了,看见没有神奇吗?神奇吗?是吧,你看我在这输入任何东西啊,它就可以这个啊就显示在这里头啊双向绑定,但是呢,呃,这个还是有点小问题,就是打字不能打太快啊,打字打太快的话,好像他死循环了。
07:13
好像他哪死循环了哈。不是打字打太快的问题,应该是死循环了。好,我们再访问8080看一下,诶好了,刚才可能是控制台输出的内容太多了。对吧,诶控制台输出的内容太多了啊,你试图访问。难道又死循环了?没有吧?没有死循环啊,就是这个你试图访问这个什么属性,就是有点输出就有点卡啊,好了,不要让他有任何的输出,我们把这个conso log我们都给他啊删掉啊,要不然这个乱糟糟的是吧。哎,文件夹中查找啊,Cons点啊。哎,我们都给它注了啊,都给它注掉,所以你就会发现双向绑定就突然间实现了啊,双向绑定这指令那为什么那么快实现,还是因为咱们之前的这个所有的储备工作做的很好啊,你看双向绑定就实现了。
08:08
看见没有对吧,双向绑定啊啊,这边变了它就能变,然后这个变了它就能变,没有什么毛病对吧?诶OK啊。就OK了,所以说然后包括循环啊什么的,其实都是这么做的啊,但是循环的话,老师在这里就不给大家去实现了啊,因为他这里你写了也是瞎写,因为他有一个虚拟节点啊,有一个虚拟do,咱们之前看过那个地图的课就应该明白,它是H函数在进行一个循环,对吧?诶是这样子的,所以VGA model到底底层是怎么实现的,现在面试官在问你VGA model实现原理,你现在就明白了,就是VGA model实际上它的本质上做了两件事。大家可以看一下哪两件事呢?第一件事。是不是它会添加这个waterer,因为我只要11MODEL a那个A身上一定要添加water。啊,这肯定要添加waterer,然后第二个呢,是要把这个呃值得到,然后显示在他身上,然后呃,你要去给他添加这个input的事件,三件事吧,添加water得到位显示位,然后呢,去添加这个input事件。
09:11
对吧,诶他就实现双向绑定了,就很简单啊,他一切都来的这么突然,对吧,然后一切就是这么这么有意思,那么呃,有同学就说老师,那你这个按钮现在他没有用指令啊,对吧?哎,没有用指令,你你这个时候最好是有一什么H圈click对吧,包括vuee,它叫做v b on。对吧,哎,VB的啊,那这个其实也很简单啊,就是也是去添加,就识别那个H圈符号啊,识别那个HR符号,然后呢啊去把你这个事件绑定上去就可以了啊,所以说你的所有的MY它其实都是绑在他身上的啊,我们不用再去写太多了,因为我们已经把他的最重要的这个指令,包括这个米GA model的实现啊,就已经讲的呃,很到位了啊。哎,然后咱们希望大家能够自己去练,不是添加监听对吧?哎,那这个时候的话,我们是不是就可以去模拟生命周期啊,因为生命周期是什么?生命周期就是这里有一个create的啊,然后这里有update对吧?哎,然后有什么before update update,那这些函数都是什么时候掉,对这些函数是不是都是在我们的所有的waterer前后去调啊。
10:21
所以这个时候waterer这个函数,他就可以在这个数据被更改前后啊,在更数据被更改前后,然后来去模拟触发VE实例身上的这些生命周期啊,所以你会发现实际上VVE最后存起来他是一个细活啊,但本质上不是一个难活啊。好吧,哎,希望能对大家有一些帮助啊,就是啊,这个还是挺考验编程内功的。啊,我们今天还是挺开心的,就是把这个双向绑定给实现了。是吧,哎,双向绑定实现了,那这个ABC我们就先给它撤掉啊,就是循环我们就不做了,不再做这个循环了啊,那因为你要做循环的话,也是要把这个。
11:03
啊,也是说白了也是要是用虚拟节点H函数那些东西要去做对吧?嗯,行,那大家多多练习啊,你不能光看,光看的话永远不会啊,你得写。
我来说两句