00:00
好嘞,各位开发环境呢,搭建好了,接下来呢,咱们拿做一个简单的小案例,回到桌面找到给大家的资料。零一课件里面有一个word文档,这个呢就是我们课程的大纲,我呢已经提前开好了,他在这儿,那我就把这个关掉了,回到这里。在讲VU基础的时候,我们一共啊是分为七章的,首先看第一章VU核心1.1V简介我就直接跳过了,因为这个里面所有东西在开篇的时候我都跟各位聊过了,直接进入1.2环节,好做这么一个简单的效果。页面上啊,有一个div,它的ID呢是root,里边包着一个H1啊,里边的内容呢是hello,上硅谷,好,咱们写一写,回到代码中。首先第一步啊,各位你呢得准备好一个容器,为什么要这样做呢?咱简单聊一下各位,你说我们之所以用,是不是想让他帮我们去构建界面呀,那你想一下是有一天view啊构建出来界面了,那这界面摆在哪个位置呢?你是不是得告诉人家呀?哎,所以说你得准备好一个容器嘛,最起码得有东西承接人家的工作成果啊,所以说写一个div aro,其实如果你对前端里面其他的框架有所了解,你就明白11行代码是一个很正常的操作,来准备一个容器好里边的东西呢。
01:32
其实按照常理分析,各位你觉不觉得里边我不应该写东西,我就只给你准备好一个容器,至于说里边有什么内容,那一会儿看怎么去工作,对吧?但是在这儿呢,各位我们换一种方式,我先写上,并且我把内容写死。H1HELLO,上硅谷我知道啊,你可能会有一个想法,老师你这么写没意义啊,老师你这么写,那就把这个删掉吧,这个也删掉吧,页面不就有东西了吗?那引入这些没有意义啊,别急,一会儿它就有意义了,一会儿你就明白了,好,我就写到这儿,我停下来,我右键打开,你说页面上能不能有效果,有。
02:13
有啊哈,上硅谷吗?但是我们心里明白,就这段东西,无论是结构还是说里边的上硅谷哈,是不是都是我写死的呀,那所以说截止到目前呀,我的vu其实并没有工作。而且你看开发者工具也是暗色的,他并不承认在这个页面里面你应用了这个技术。老师,那为什么呢?老师,代码里我也引入了呀,我也调整了呀,各位,你引入了view,你调整了全局配置,我也只能说V已经待命了,准备好了,但是你就是没有写出让view能工作的那段代码,朱老师,那还想啥?赶紧写一段代码让他工作呀,你别急,回到这儿,我带着你看一个控制台里的错误走。
03:00
这儿呢,啥情况呀?HTTP的状态码呢,是404,并且说了是这个资源找不见,读一读啥资源呀?Favor icon指的就是网站的页签图标,或者你说是网站的偏爱图标也行。哎,你还挺委屈,老师没写过代码发送这请求啊,说一下你没写,这是浏览器的一个默认的行为。浏览器打开任何一个网站的时候,都会默认的去请求页签图标,对吧,那你这没有他就404了呗,问题是他找谁要的这页签图标,然后说没有呢?来到network选项卡强制刷新一下,强制刷新啊各位按住shift,然后点这个刷新就是强制刷新。如果你要正常刷新啊,他可能就没了,他请求了一次,发现没有可能就诶不再请求了,你得摁住shift强刷好来到这儿,同学你看明白了吧,他找谁呀。
04:00
他找这个人127,这个地址我就不提了啊,这个地址呢,代表的是你本机谁的电脑上的127.0.0.1就代表谁的电脑。那也就是说他找我这台电脑位于5500端口的那个服务器去要什么呀,页签图标。那问题是5500这台服务器是哪儿来的呀?我没有写过代码去开这个服务器啊,诶简单跟各位聊一下,有的小伙伴可能不知道,我在Vs code里面用了一个比较好用的插件叫live server。6SERVER的功能我先说啊,你选择了一个选项之后,它会帮你打开当前你所处的这个页面啊,这个网页就直接打开了,它的工作特点就是你选中它的一瞬间,它就在你本机5500的端口号上给你开了一台内置的小服务器,并且进行了一个最重要的动作啊,把你整个工程里面所有的文件和文件夹都作为这台服务器的跟资源去使用。
05:04
老师咋理解啥叫根子源呀?回到页面里面,我给你演示一下,我给他留出点更多的空间,好,我把路径全删下去,我这么写啥意思?直接找5500这台服务器要东西,你看他给你的是什么,他说我一共有这么多东西,你想看哪个呢?零一初始VGS觉不觉得它正是我们当前工程里边的这些文件夹呀?那很自然呀,人家就去找这一堆红色的区域,需要页签图标,然后说没有,然后就404了,那解决方案你也知道了,我们怎么做,给他一个就得了呗,我的授课素材里面提前准备好了一个,咱们上硅谷的页签图标摁住。放到根路径就可以松手关掉。那这个时候呢,同学你把浏览器啊也关掉,右键重新打开你看效果。诶,页签图标是不是就有了?诶,那你来到控制台那个错误呢也没了,再也没有人干扰你了。好了,快点,言归正传,我们得写一段代码让view工作,对吗?回到代码当中写写吧,我们也知道了,当你引入了这个东西之后啊,你的全局就多了一个名为view的构造函数。
06:19
那我都说是构造函数了,各位你也明白吧,是不是得用new去调用,哎,那所以说写点view相关的代码吧,但是我给你个建议啊,你最好在16行后边,你去new这个view,为什么呢?因为你想啊,16行在调整整体的view的一个配置,最好是调整完了你再用,对不?先调整再使用嘛,有一个。按照我们的编码习惯来说,各位,我们总喜欢在一个实例对象出现的时候拿一个变量去接,对吗?诶,那满足一下你,我接了用X,可能有些小伙伴吧,看了官网,然后就说老师不对吧,不用VM吗?各位听我说,我还没有去给你讲解它的MVVM模型,在这我也只字不提这个VM怎么简单怎么来,同学用X不行吗?可以啊。
07:12
好,写好注释,嗯,走叫做。创建view实例啊,以后咱们肯定得告诉大家的,这东西其实叫VM,回头再说,好19行,注意了各位,是一切的开端,你想用view,你要不写19行代码免谈,这事聊不下去了。接下来说这么一个问题,就是用的时候我传不传参数。传几个分别是什么数据类型啊,那你也别猜了,对吧,有意义的东西我让你猜一下啊,你就猜不到呢,我就直接告诉你,这儿呢,只传一个参数,并且参数的类型是一个对象。那我们管这种对象啊,叫做配置对象,现在啊,同学都学到view了,你应该有所感觉,我一说配置对象,你马上就得反馈出来一些东西,你比如说都用过了吧,我想用它发个请求,传不传配置对象?传配置对象里面第一组配置叫什么来着?URL里边写什么呀?具体给哪发请求吗?我就不写具体的地址了。
08:18
同学,你敢把URL写成URA,人家就不认识对吧?所以说配置对象里边的K是不能够随便改的。说老师那能随便改值啊,咱得这么说,你可以换地址对吧,哎,我再换一个可以,但是你不能这么写啥意思。配置对象的value值数据类型是不能随便更改的,得用人家指定的那几种是吧?好了,这儿呢,咱就不多墨迹了,接下来给大家介绍view实例里边的第一个配置叫做EL,我先写,然后你猜猜是什么含义,因为这如果你基础好的话是能猜到的。各位,我写了一个EL。
09:02
啊,这会儿我告诉你啊,EL是这个单词的简称,Element什么意思呀,元素,那你瞄着绿色框的看一看,再瞄着红色框的看一看。如果你CSS还不错的话,其实你明白我写了一个CSS里的ID选择器,对吗?我通过这个选择器是不是找到了这个容器啊,老师呢,这20行有什么作用呢?那简单说一下各位,绿色的是一个有实力,红色的是一个容器,倘若没有20行这个配置,没有这个东西,那么你的有实力和容器是互相看不见的,不知道对方的存在,我一写不要紧,同学让这个实力和这个容器之间就建立起来了一个关系。View实例就知道了,一会儿要把工作成果放在这个红色的里面去,对吧?好,那我们写一个注释吧,各位走EL用于指定当前V实例为哪个容器什么呢?诶服那说说值吧,值啊,为CSS选择器字符串,但是我想先加个修饰词。
10:21
叫做直啊,通常为同学你说我加这啥意思呀?我的潜台词是什么意思?通常为这个东西,那也就意味着有可能还不写这个东西。说老师那写什么呢?简单给大家说一下,其实这儿啊,你可以不写选择器,字符串,还有一个比较笨重的写法,我们以后肯定不用,但是你得知道它是能这么玩的。怎么写呢?瞧着document点儿,Get element by ID。嘿,啥意思,刚才那种写法就是你给他个选择器,他自己去找去,那这种写法就是你亲自找到这个元素,给它配置到EL里啊,那你说哪个写法更精简呢?一定是刚才那个,所以说这个写法呢,咱们知道了解一下就可以了,井号这么写。
11:12
那你可能说老师就只能用ID呗,哎,也不是各位你要写class,那在这你知道就用什么呀,CSS里的类选择器呗,点这不就得了吗?啊一般来说各位我们都用什么呀,ID,因为写起来简单吗?是吧?好,那这个配置项呢就说完了,那如果你只写到这儿啊,各位怎么讲你的view啊,用的也是没什么太大意义,你看一下啊,绿色的是谁。没有实力对象,红色的是谁?容器,它俩建没建立起来?关系建立起来了。但是有一个问题,你这个里边所有的东西是不是都是写死的呀?各位,那你要是真想这么写的话,那我劝你啊,就这一堆删了这view啊,也不引入,各位,你说页面能不能出效果,它照样出效果呀,那你看你的view用的意义就不大吗?那撤回来,各位,我说一个需求啊,是这样的,就是整个这个容器里边的东西啊,Hello啊,是不变的,永远不变,但是这个橙色的文字上硅谷三个字是变的。
12:16
也就是说啊,现在叫哈上硅谷,一会儿用户可能点击一下按钮啊,就变成了hello张三,它是变化的,哎,那所以说你就不能写死了,各位,你要在这儿还这么写上硅谷,那谁也帮不了你啊,就是一个写死的数据吗?老师,那我得怎么办呢?我跟你说一下啊各位。这是容器,这是有实力,你要这样做。把容器里面变化的数据,哎,就这家伙交给谁呢?我有实力去保管。在语实例里面,通过某些配置项,就把上硅谷那三个字,哎,比如说保存在粉色框里了,然后你再通过某种办法。从这个粉色框里边把上归骨拿出来放在这儿。
13:03
老师,这麻烦呀,表面上看麻烦,但是当数据变化的时候就很简单了。各位你想以后如果上硅谷三个字想变成张三,那么你需要做的就是通过某种办法把绿色框这个实例里边保存的上硅谷改成张三,那么你神奇般的发现,页面里面用到上硅谷这三个字的地方自动就发生变化了。就有一种感觉,你只负责把数据维护好,用到数据的地方自然而然就变了,这不就省去了你自己操作盗墓吗?对吧?各位,好了,所以说上硅谷不能写在这儿了,那以后写什么不知道就问号代替,把上硅谷交给绿色的view实例好了,开始你就得需要一个全新的配置项,名字叫做什么意思呀?本质就有数据的意思对吗?各位,哎,但你别忘了呀,这会得有一个小逗号对吧?多组KY6之间不得用逗号做分隔吗?同学,那这个date让你设计的话,你把它设计成什么数据类型呢?
14:11
可能有些小伙伴能想到哈,老师啊,我根据上边那一样呗,也用字符串呗,完我就把上硅谷那三个字儿,我就存在这儿呗,完了我通过某种办法就给他,诶读过去了,这不挺好的吗?那你想一个问题啊,各位,如果你这里面再来一个,诶叫做我的年龄是18,这18也是动态的,各位。以后也要变老师,那就不存上硅谷了,存18,那我问你上硅谷不要了,这块不展示了不行吧。你看这不就打架了吗?那你可能说老师能存呀,我按照一个特殊的字符做分隔,我再写一个18,这不就可以了吗?同学啊,那你拿出来的时候,你不费事儿吗?不得用这个做分格吗?行了,同学,这我就不再墨迹了啊,不,不再再引导大家了。所以说同学,人家的设计不可能是这样的,那我直接说吧,它的设计啊,其实有一种写法是让你写成一个对象。
15:07
哎,这回就好解决问题了,你看啊,同学,学校的名字我可以存在name里边吧,叫上硅谷那人是不是还有年龄啊?那再写一个A值是18岁,这不就搞定了吗?你看你存什么东西不能存呀?好,哎,那我们现在呢,不需要这个年龄,那这呢,我也不写逗号,删掉好了,就把商硅谷怎么办存进去了。那问题是存进去了,但是页面里边是看一下啊来走。页面里边是hello问号,这不对吧?各位,那怎么办呀,你得在这儿啊,用一点特殊的写法,让它能读取到date里的name对吧?你可不要天真的以为是date点,这可不对,你这么写人当你这些东西啊,全都是属于H1里的一些,哎,文字,好了,那咱回来啊各位,我直接告诉大家啊,这块呢,你就得用到一个特殊的写法了啊,是view所设计的,叫做什么呢?差值语法,同学先不用记啊,你就知道这叫差值语法就行了,关于view的语法,我们会单独有一小节详细的讲解,哎,这叫差值,差值什么意思呀?插入一个值嘛,它是这么设计这个语法的啊各位。
16:16
用两组画括号里边直接写上内说老师,那这个东西它是对象,不是老师,那好像是结构赋值吧,同学听我说这两个绿色的花括号,它就是一个分隔符,跟对象啊,结构赋值啊没有任何关系。也就是说,人家当年要设计用两个星号做分格,那你绝对不会想歪了,但是人家设计的不是分号吗?是两组花括号,说老师我这么一写,完了它就能读到date里边所有的这些东西了。是的,就这意思,比如说回来你看页面出效果了,上硅谷是动态的,朱老师你改啊。你不是说了吗?得把这东西一改呀,页面就变吗?那改是以后的事儿,咱先这写着,你比如说我给上硅谷后边加个123,我先这么改,我一保存,我一回来,你看这是不是就变,哎,再回来,好,那我们把date里边的这个注释呢,给大家写一下,好,叫做date中用于存储什么呀,数据,那再补一句就是数据供谁使用呢?EL所指定的容器去使用,为啥我要强调说数据供谁使用呢?那是因为啊各位,如果你在这儿写个H1,你写的像模像样的,里边写个name,你觉得能看到这个吗?
17:41
不可能。你看一下。他当你这一堆东西就是文字。那为什么没有人去发现这个东西,并且认识这个东西呢?那是因为啊各位你说的很明白,你这个绿色的尾实例只是接管了红色容器,红色容器里以外的东西他管吗?他不管。
18:02
哎,对吧,所以说我得强调一下,这个供谁去使用,那我们不在这写这个,那在补后半句吧,叫做值值呢,我这么写啊,叫做我们暂时啊先写成一个对象,你说我这么写是啥意思,我说暂时先写成一个对象,那就意味着以后啊写成对象有可能你就玩不下去了。说老师那咋办呀,到时候再说呗,各位先简单给你剧透一下啊,我们在讲到组件的时候,这个date呀,得写成一个函数,好了同学点到为止啊,不用去琢磨,不用去看文档,以后咱自然而然会讲的,哎,组建的时候可能会写成一个函数,好了这儿呢就不多墨迹了,那这个小案例呢,咱们就写到这儿,不再写过多的配置项了啊,那接下来呢,同学你觉不觉得你这X。定义的有点多余啊,所以说各位这实例我们在这个里面用街道吗?不用街道直接拗就可以了,刷新看一切正常好了,那我们接下来呢,进行一波总结,那么总结性的东西各位我就不一点一点敲了。
19:09
那那么多的文字耽误时间呀,对吧?以后总结性的东西我就准备好直接拿回来,你像这些东西咱们就随写随敲,你记忆能深刻对不?好了,那把这个总结性的东西拿过来,就是这一堆复制,直接往过一粘,三句话我们读一下。首先第一句来同学想让view工作,就必须创建一个view实例啊,没得商量,并且你得传入一个配置对象,我只告诉了大家两个配置,一个是EL,一个是date,好,再读第二句。Lot容器中的代码依然符合HTML规范,这什么意思呀?我在写19行的时候,我好像并没有给大家解释,我说同学H1叫一级标题里边的文字默认就有放大加粗的效果,我没这么说吧,因为大家都是懂这个HTML规范的,所以说你在写这个容器里边的代码的时候啊,你也不用太紧张,HTML怎么写这里边儿的东西呢?哎,基本上是一样的。
20:09
但只不过怎么的呢?这里边儿混入了一些特殊的view语法。那谁是呢?他就是你觉得呢?那同学你说原来我们写东西的时候好像没这么写过吧,对吧?那这就是view的一些特殊语法,好了,再读第三句,Root容器中的代码被称为什么view模板,这是一个很重要的概念,希望大家能理解。如果你想把模板理解好,那你得听我给你说一下它整个的解析流程,好了,是这样的。先有的容器,然后有的绿色的,比如实力。当绿色的view实例开始工作的时候,他发现呀,你写了27行的配置,那他就知道了,我得把整个容器呀都拿过来,拿过来之后呢,他进行了一个特别重要的步骤,叫做解析,那解析的是什么呢?他去扫描有没有自己设计的这些特殊语法。
21:08
比如说这扫到了,然后干嘛呢?他说那你要用谁呀,我要用name,那我的data里面有没有name呀,有什么名啊,上硅谷,于是你听我说,他拿着上硅谷这三个汉字,就把整个这边橙色框的东西全都替换掉了。然后就生成了一个全新的divid为RO的容器,里边包着的H1各位就不再是你写的花花号内幕了,而是什么呀,上硅谷三个字,然后再把解析完的这个东西重新放到页面上,替换掉刚才的整个容器。那所谓的模板你觉不觉得就是人家先拿到这一堆东西,这一堆东西里边混着很多特殊的写法,那这个就是什么呀?View的模板,模板经过解析就变成了一个正常的HTML片段,就包含着你想要的数据了,再把这个东西怎么办放回来。所以说容器两个作用,一为V提供模板,二,它的作用就是把view的工作成果让他知道往哪放,对吧?好,这个案例呢,我们不适合说太多,而且这个案例里边呢,还有很多细节上的问题,我们放在下一小节呢,去跟大家探讨好,那这一小节呢,我们提。
我来说两句