00:00
好了各位,在这一小节呢,我们跟大家聊一个架构模型,它的名字呢,叫做MVVM模型,为什么要聊它呢?那是因为啊,View的作者在最开始设计VU的时候,就在一定程度上参考了这个模型,那按照他官网里边的那句话呢,就是V的设计受到了MVVM模型的启发,我们去官网里找到那句话啊,在学习里的教程,这里面有一个view实例。你读一下这句话,虽然没有完全遵循MVVM模型,它没有完全遵循,那所以说你看我刚才说是在一定程度上参考了这个模型,对吧,值得大家注意的是。在没有V的时候,MVV,诶这种架构模型就已经存在了,所以说你可千万不要说是V的作者缔造的这个模型,不是的。是vu的作者参考这个模型设计了一个view里边所特有的模型,OK,再读后半句话说,但viewu的设计也受到了他的启发,是不好,那这个东西其实也能点,各位你点一下。
01:11
他就来到了那个国外的维基百科这个网站,那这里面呢,就是对MVVM一个最通用最标准的一个定义,那是这样啊各位我们呢,在这儿不去长篇大论的把它这里边的定义全都读一遍,我们更关注的是V的作者参考这个MVVM设计出来的,里面所独有的模型是分为几个部分的,哎,每一个部分都是干嘛的?好吧,各位,咱就把它关掉了啊,咱们研究研究view,针对这个模型,它设计出来了什么东西,那就回到我们的课件当中走1.5。值得你注意的是,MVVM是四个字母,但是它却代表着三个东西,是一个,V是一个,VM是一个。首先我们读一下啊,各位,M是model这个单词的简称,它的含义呢,是模型,然后再看第二个啊,咱先读一读啊,第二个是VV呢是view这个单词的简称,含义是视图,再看这个VM是view model这个单词的简称,含义是视图模型,那你觉不觉得各位啊,就我把红色框里的东西都带着你读了一遍,好像还是没怎么懂。
02:25
还是不知道这些东西它都是干嘛的,对吧,所以说各位啊,你听我说,你得把这三个概念呀,靠到你的view代码上,这样的话你才能懂,所以说我们从第一个开始来啊,各位,这个m model啊,其实就对应我们view代码中啊,你date里面所写的数据。那你看下边的这幅图,就是图中的哪个呢?右侧的这个你看model,然后他用一个绿色的箭头啊,给你指了一下,你看蓝色框里的读一读什么意思。Javascript objects。直译过来就是一般JS对象,它的含义就是你那数据啊,得写成一个一般对象,来我们查阅一下啊,来走搜索一下,本来简单的什么朴实无华的,那在这儿呢,其实我们用的那个含义就是一般的,哎,一般对象嘛,好,那各位这回知道了吧,模型其实就是我们里的啥呀数据,好,再看下一个概念叫做view视图,视图呢,其实就是我们view代码中的什么呀,模板。
03:28
你看就是图里边最左侧的这个看view,你看它这个小图标用的啊,是不是有点像一张纸一样,你看这还卷了一下对吧?然后他用箭头给你指了一下,他说这是什么呀,Do do都出现了,你说它往往对应的是不是就是页面呀?那我再问各位,你这个页面是打哪来的呀?是不是view的模板经过解析形成的页面,从而生成的DOM结构呀,你说对吧?哎,所以说从某种程度上来说,你写的模板就也是什么呀,页面结构对不?哎,那在这我们就说模板了,然后就有一个最重要的概念出现了,各位叫做VM,它叫做v model,而且你看它是最大的一个是吧,它绿色的箭头所指的写了一个大写的view,什么意思呀?它的含义是整个这个绿色的大盒子就是一个view所缔造的实例对象,所以说view model就对应我们的view实例对象。
04:27
那你看看啊各位,在这个view model里面有两条线,第一条线呢,叫做datas,这什么意思呀,数据绑定。各位你想一下,我们在写这个data的时候啊,无论你是直接写了一个对象,还是说呢,你写了一个函数,然后这个函数的返回值啊,是你那个date那个数据对象,我不管你怎么写的,我就问你各位,你那date是不是对象是吧?啊,那你对象里面配置的什么呀,一组一组KY6都是你想要的数据,对吗?数据啊,你就给它存在红色的这个里面。
05:04
然后呢,经过visual实例进行数据绑定,就把你的数据摆在了你想要的页面上的位置,这就可以了,哎,所以说你看这条线就是把数据放到指定位置,对不好,再看另外一条线,它叫做DOM listener什么意思?盗墓呢呢,大家都知道盗墓结构,那listeners什么意思啊,监听器监听者舒老师,那这条线有什么作用啊?那各位你想想,你还记得那个案例吧,我们页面上有个输入框,你在输入框里面啊,输入了一个一,随后呢,这个一呀就跑到数据里面去了,这不是咱说的双向数据绑定吗?页面上的改变能映射回数据里的改变对不?那同学你想想。他是不是得时时刻刻监听这个input框,得知道你到底输没输入东西,还得知道你输入的是什么,然后拿着你输入的值是不是存在这个数据里,那各位你想想这是不是就对盗墓的一种监听啊,哎,所以说你看各位这个图呢,挺好理解的,没你想的那么难,那为了能让大家把这图呢理解的更好,我们写一小段代码啊,各位回来走。
06:20
提前准备好了这些东西啊,我在页面上呢,展示学校的两个信息,一个是学校名,一个是学校的地址啊写个H1叫做学校名称,好我就一步到位了啊,直接写是内,这我换一下啊是中文的冒号,再来一个这叫学校的什么呢?地址,然后这写一下address,那这呢就得创建一个view实例,早有名字。地址那简单写吧,就写北京好,写完了吧,看一下效果走。哎,东西都出来了,控制台呢,也没啥错误,好了,我们去对应一下吧,各位走着,这个是哪儿啊?
07:01
就是视图,哎,就是我们的模型,说白了就是view,然后你这里边所配置的粉色的这个区域呢,其实它是什么呢?它是model,就是我们所说的模型,哎,也就是数据在这儿呢,然后整个这个绿色框的啊,就是这个东西,New的这个view,其实他就是最重要的那个人,谁呢叫做view model什么意思啊,视图模型。数据在这儿,数据经过它,诶就放到了页面上,页面上如果再有什么地方需要更改,要映射回数据,那就走这儿,然后呢,再去改这里的东西,对不?所以说各位你觉不觉得MVVM模型,其实说的再直白一点,就是把一堆乱七八糟的数据,哎和一堆盗墓结构,他在中间呢,做了一个连接,你说是这意思不?它是中间的一个桥梁,它是中间的一个纽带,你说对吗?所以说这话要说到这儿吧各位,其实前端里面主流的框架设计都是这个思想,你把数据放在我要求放好的位置,然后呢,你写出这种模板代码,模板里面具体怎么往里面插入值,那你就得学习我这个框架的语法了,是什么指令啊,什么插值语法啊,那你就学去吧,对吧?然后呢,你让我这个框架开始工作,我就能把左边和右边的东西建立起来一个连接,对不?而且人家还给你承诺一件事儿,红色框里的东西以后无论怎么变,那么蓝色的页面里面用到那个数据的地方就自动更新了,你说是吧?哎,有一种感觉,他帮你干了很多繁重的事情,好,诶,那这就是对MVVM的一个理解。回到官网里面,我们看后半句话,他说,因此在文档中我们经常会用V这个变量名呢去代表view实例,那你看,这不正好就对应到咱们这个图上了吗?View model简称VVM是谁呀?
08:59
实例对象,所以说各位,以后我们如果再拿变量去接收这个V实例,请你们都用VM。
09:08
那既然VM都出来了,我们就再说一点哈,那输出一下这个VM,为以后扫清一些障碍啊,回到我的页面中,打开这个实例对象去看一下各位啊,你观察一下他身上啊,有两个东西。一个是内幕,一个是address,在这儿我只字不提数据代理这事儿,咱就是观察一个最表象的东西,我想把数据代理和MVVM拆开讲,各位你就说我现在输出的是不是view实例,是view实例身上有没有address这个属性,有有没有name这个属性,有说老师那他们没有值啊,你点一下它就有值了,看北京上硅谷说老师为啥点一下呢?我们后边讲数据代理的时候会详细跟你聊的,同学我问你啊。曾经你代码中写在data里的这两个属性,Name和address,也不管人家经历了什么啊,反正最后我问你出没出现在VM身上。
10:11
出现了吧,那就得了,说老师那你再写一个,我要写一个A是一呢,那你看吧,打开。这就有A一点就出来了,G1,哎,所以说同学啊,我们通过观察发现date中写的这么一组一组的KY6,最后都出现在谁身上了?VM身上。那这块说完了呢,我们就来再探讨一下,双花括号里都能写些什么,说老师之前不总结过吗?这个里边能写什么,那得看这里边它有什么呀,然后你还跟我说了一下,说老师这里边还能写这个一加一,诶这种表达式,好,前面不是学校地址了,我写测试一下是不?老师还能写这个,那你看吗?嗯,这就是二。那同学啊,咱们这回VM都出来了,我们就把这个东西标准的说一下各位,我整个红色的模板里面确实可以写一加一这种运算的表达式,也确实可以写date中所出现的这三个东西,但是我告诉你啊,他除了能写这三个属性,还能写很多很多,那试一下啊,这叫测试一下,一这是要测试一下,二,他还能看到什么呢?你听我说。
11:21
所有VM身上的属性,他都能看得见。之所以人家能看到A,能看到address,能看到内幕,是因为VM身上有,你说对吧,那你可能说老师那不对呀,是我写在这儿的,你是写在这儿的,你别管人家怎么办啊,人家绕了一个很大的圈子,但是最终咋的人能让VM身上有,这就够了啊,所以说同学本质是他能看见VM身上所有的属性。也就这么说吧,你在这不写一加一,你写一个ABC,那不好意思,在VM身上是没有ABC这个属性的,所以说你看他报错了。
12:02
说老师,那按照你这么说,我可就随便找一个了,老师我就相中他了,我看这东西还挺长的,什么Dollar for options可以写呀,复制。回来别写ABC,写啥Dollar符options。老师,那不得什么v.a你可停,Dollar for options已经出现在VM上了,你不要在VM点了,直接写就可以,回头瞧瞧,我看这一堆是不是来了。啊,说老师就是VM身上的全都能用,不仅仅是VM身上的他能直接用,而且是出现在原型上的东西,他也能直接用,你比如说这里边有一个什么呢?Dollar forit,对吧,我们后期也会讲,那说老师这个东西能用吗?可以瞧着回到模板当中再来一个测试一下几呢三我把这个也给你写上dollarit。但是我这么写吧,同学咱说一下啊,其实我打绿色勾的这两个吧,我写的就有点没意义了,因为这两个东西呢,不是说让我们直接去放到页面上去看的,你比如说这个Dollar formate,其实它是一个方法,我们得去调用它,但是在这儿啊,咱不考虑那么多,咱就验证一下VM身上有的东西,原型上有的东西,能不能在模板里直接用回来,你看测试一下。三是不是在这儿呢?你看我把一堆这个底层的源码给它放在这儿了,是吧?啊你可能说老师那我发现你的套路了,你就写这些Dollar符开头了,不是Dollar的,你咋不写呢?那我再写一个,各位啊,随机选一个,你比如说这个下划线C可以吧,来走,再来一个测试一下几呢?四咋写下划线C好,回到这儿,滑到最后。
13:39
测试一下四看有没有东西有,哎,所以说这回明白了吧,各位,不是说date里边有,完了他能看见,是date里的东西最终最终出现在了VM身上,VM身上有的,他全都能在模板里面直接用好,那我们进行一个整体的总结啊各位,那这样我把这A呀就删掉了,我把这些测试呢,也都给你掉,大家下去自己呢测试一下来我们总结一下啊各位MVVM模型是代表三个东西的,M就是date中的数据,V就是我的模板代码,那VM就是我的view实例,那我们刚才通过观察发现date中所有的属性有一个算一个,最后都出现在了VM身上,其实这里边有一个数据代理,但是我不提好,再读第二句,VM身上所有的属性,以及VU原型上所有的属性在V模板中都可以,怎么办?直接使用好了。那这一小节呢,我们。
我来说两句