00:00
好了各位,接下来呢,聊几个细节上的问题啊,也很重要,首先看第一个,如果我的页面上有两个容器怎么办?可能有些小伙伴说,老师本身你这写法就有问题,你这俩div的ID怎么能一样呢?哎,那确实是哈,不写ID了,写class这会也改一下,好,那这就得改一下,对吧?诶,好,那这么写这段代码什么含义啊,分析一下。一个view实例呢,出现了,根据你所写的这个选择器呢,他去找容器,首先他一定找到了这个容器,红色的,随后如果他再继续找的话,其实他能找到第二个,你说对吧?啊,那这两个容器啊,有一种感觉都被谁给接管了呀,这个绿色的view实例,而且里边都用到了什么呢?Name,最主要的是这有没有name呀,有。那所以说表面上来看,好像页面上应该出现两个哈上硅谷才对是吧?哎,回到页面瞧一下。很明显同学第一个是正常的,那第二个呢,没人解析,就一种感觉,你写了双画括号里边写了一个内幕,但是谁好像并没有看得见呀,View。
01:09
旅欧好像并没有看见他,也没有解析他最主要的呢,控制台还不报错误,说说这是为什么啊,回到代码中。根据你所写的选择器呢,其实它能找到两个容器,第一个一定是你写在上方的这个,下边那个其实也能看得见,但是它不再用了,只用第一个,你比如说我给你编个号啊,这叫一,这叫二,一先写的吧,所以说按照盗墓结构来说,它在前,他在后,先找的一定是它,所以说一能正常解析,二不行,那如果你调换一下顺序,同学你把这个二呢,给它往上放,你回来二就有人解析,一就没有,对吗?哎,所以说同学我们发现一个事儿啊,一个有实力不能够同时的去接管两个容器啊,你先别总结,我们在考虑另外一个问题。刚才啊,我是多个容器对应几个实例,第一个,那你说我能不能这么做呢?就是多个实例,哎,我去对应一个容器,其实不就是一对多和多对一这么一个关系吗?啊,那刚才是多个容器对应一个实例,你是不是对应失败了呀?那换来走各位页面上只有一个容器标识,还是用ID这块呢,还写井号,然后呢,我这么做,瞧着空号我删一下。
02:24
再来一个view实例,他也说自己管理的是RO这个容器,并且提供的数据呢,不是学校的名字了,而是学校的地址,Address,简单写北京昌平,好,那分析一下吧,什么意思啊,表面上来看这是一个view实例,这又是一个view实例,那按照这个选择器,它会找到这个容器接管了吧,那这里边是不是还有一个选择器啊?哎,再找是不是又找到这个容器是不是也接管了呀?那也就是说有一种感觉啊,这里边如果用到name,那这块有,那这里边如果在二那个位置用的是address呢,好像这能管,那我们试试看能不能行,二呢?删掉address啊,中间加个逗号吧,好,回到页面看一下效果,刷新上硅谷正常,但是后边的地址是不是没了呀,并且控制台是不是还报了一个错误呀?简单说说为什么会这样回来是这样的啊各位容器呢,确实是只有一个。
03:22
然后当这个尾U实例出现的时候呀,他就知道了自己呢要去负责这个容器,你又写了这段橙色框的代码,虽然你还有一个尾U实例,虽然依然在接管咱们的这个红色的容器,但是由于绿色的VU实例已经接管了红色的容器,你的橙色框里的这些代码虽然执行了,但是没有任何的作用,一个容器同学只能被一个view实例去接管,所以说你觉不觉得各位一句话,容器和view u实力之间的关系是一对多包形,多对一报形,它俩之间就是个什么关系啊,一一对应明白不,同学如果你真想有两个容器,你就好好写,同学这给它换个名叫root,二或者你写别的也可以,对吧,你不叫root,叫什么DEMO也可以啊,那你在这儿呢,就得说明白是什么呢,二啊,那你这里边用到了name address这里边是不是也用到了呀,所以说各位啊,它俩之间呢,是没什么影响的address。
04:23
好,你在这儿呢,写一个北京昌平,那这样我这儿呢,不写上硅谷,写艾特硅谷写咱学校的英文名,诶那这儿呢,就是写一个叫做上海啊上海,哎,那这呢我教RO2ADDRESS呢。还是北京昌平,这名字呢,我写一下名字呢,写中文的啊,上硅谷好完事了吧,你看这个红色的容器就交给这个绿色的实力区保管就可以了,里边有name,有address,那同理,这个容器是不是交给他呀,回到页面来瞧一下效果,诶这回都正常了,一句话一一对应,好,那这个容器呢,留一个view,实例呢留一个OK,那这会儿呢,给他重新改回北京好回来啊S硅谷北京说老师啊,一一对应是吧,行,我这个里边啊有非常非常多复杂的结构,这个结构里呢,一共有100个数据是动态的。
05:12
老师,那是不是意味着在粉色框里边你得写100组k value6才能支持我这边去展示数据啊,表面上来看是这样的,舒老师,那100个数据,那这写起来也太多了吧,那随着我的业务逻辑增加你这个view实力,有一种感觉东西是不是太多了呀,我们后期呀也会有解决办法,简单跟大家说一下啊,各位,红色的容器以后真实开发中,在公司开发确实只有一个,这个绿色的旅有实力呢,也确实只有一个,但是不见得说红色的东西会特别长,绿色的KY里边配置的会特别多,它是这样做的,简单跟大家说一下,别看有实力只有一个个位,但是有实力啊可以有很多的手下人,诶我这些所有的粉丝框啊,都算作五有实力的手下人。你这里面假设说有100个数据是动态的,那我可以把100个其中的40个交给他,把其中的15个交给他,对吧,那再把其中剩下的,哎,那45个呢,诶交给这儿,你说可以不是可以的呀,那你想想嘛,这样的话是不是把数据就拆开了呀,其实我再给你渗透什么思想呢?组建,哎以后其实这些粉色的都是什么呀,各位都是组建呀,那在这儿咱先不过多聊同学一句话,容器和尾游实力一一对应完活儿再说另外一个各位,就是这个双花括号里面到底能写什么,也就是粉色框里面到底它能写什么。
06:36
那你要是简单总结吧,各位,你可能就这么说了,老师,这个绿色的数据里面有什么,我这就能写什么。绿色的数据里边有name address,我这就能写name address,那里边没有年龄,那你就不能写年龄,老师你写他就报错,你瞧对吧,读读那报错它是什么,刚才你也遇到这错误了,咱读一读同学,他说什么有一个属性,或者是什么method的谁A怎么了呀,没有定义,没有定义在哪啊,Instance叫失例,哎,他的意思就是哥们儿你写错了,我发现你怎么用到了A呢,但是A是没有出现在这个配置里边的,说老师你看我这总结的,这不是挺好的吗?对吧,这里边有啥呢?这就写啥呗,但你这么总结呀,就局限了,但你看着我给你写一个一加一。
07:25
同学,那你说这里边儿有一吗?好像没有,那我就写个一加一,你瞧,嗯。二哎,说老师是哈,哎,你看着我再写一个date.no还记得这是干嘛的吗?获取当前时间的时间戳格式,说老师那你这个date也不对呀,你这个里边可没有date呀,那你这一点肯定报错呀,嗯。他不报错,但所以说同学可不能像你那么总结说这里边儿有啥,这就只能写啥,老师那怎么办呀,我说一下各位啊,就是你所有这些粉色框里面,也就是说你这个双花括号里边包着的这些代码呢,必须得写成啊GS里的表达式。
08:03
GS的表达式。说老师那表达式是什么意思呀。那同学,GS语句你知道吧?或者推1万步讲GS代码你知道吧?GS表达式就是一种特殊的JS语句,GS语句也称之为GS代码。哎,那就简单给大家总结那么一下子啊,叫做注意区分表达式和代码,或者说的明白一点,注意区分GS表达式和什么呢?GS代码。有什么区别呀,首先说说啊同学,这个代码啊,也叫做语句JS,语句JS代码那是一个意思,哎,首先说说什么叫表达式,第一个走表达式,表达式的定义是这样的一个表达式呢,会。生成一个值,哎,可以啊,放在任何一个需要值的地方写几个常见的啊,各位首先看第一个,我就写个变量,A同学,它就是个表达式,你说对不对。
09:11
A不是一个变量吗?变量里边不得存储一个值吗?那你可以把A写在任何的位置,那它就会读取A这个变量,然后拿到A这个变量里面存的值给你用,你说对吗?各位,那你别谈那杠啊,你说老师那A1没定义呢,那同学你的代码本身就有毛病啊,咱们建立的是代码没毛病的前提下,对不对?好,还有一些常见的,你比如说再写一个,各位走二什么呢?看着我再写一个,比如说写一个A加B,你说是不是表达式呢?必须式啊,这叫加法运算表达式对不对?哎,好了,再写一个,走常见的啊,我这么写DEMO传个一,这叫什么呀,各位。函数调用表达式对不对?同学,你发现这些人都有一个特点,就是你拿一个变量在左侧接,你能接到一个值,无论是AA加BDEMO调用,传个一,或者是传一个什么不传什么的,对不对,这无所谓了,总之函数是不是调用了,函数调用了是一定有返回值的,老师瞎扯,程序员不写return,程序员不写,你拿到的是不andde fund呀,你凭什么瞧不起andde fund呀,Andde fund也是基本类型之一啊,你说对吧?各位,哎,你看他们都能生成一个值,其实还有一个咱比较常用的啊,我写一下各位你应该还记得,就是三元表达式,你比如说写一个形式啊,我问一下X和Y啊,相不相等,如果相等那就给你A,如果不相等呢?哎,那我就给你B。同学,那你说它是不是表达式。
10:32
那你都说了嘛,它是三元表达式或者三目表达式,那你说它是不是表达式,那肯定是嘛,对吧,各位,哎,这就是表达式好了,那在宏观的一个概念就什么呀,GS代码了,或者也叫什么呀,哎,JS语句,那说几个常用的啊各位走首先说第一个,哎,咱们天天写啊这些,比如说第一个if走同学,这叫判断语句,对吧?好,还有什么呢?走写一个for,这是什么呀,这叫循环语句,你看这些东西不生成值,这些东西只是控制代码的走向,这个控制走不走,这个呢,控制走几次,你说是吧?哎,同学,所以说同学啊,简单说一下就是GS表达式是一种特殊的GS代码,或者说GS表达式是一种特殊的JS语句,那特殊在哪啊?会生成一个值,或者说这个吧,叫产生一个值,标准一点哎,就产生一个值对不好嘞,各位啊,那再说最后一个小问题啊,来各位,就是我为什么辛辛苦苦的要把这些数据。
11:32
去交给view实例去保管呢,然后这儿呢,还得用这种特殊的写法,还得辛辛苦苦从这儿怎么办读出来,然后呢才能放到页面上去,为啥喜欢这么写呀?那同学简单说啊,正是因为我们的数据是动态的,以后艾特硅谷,以后北京它都要变化,所以说我才把数据交给了谁啊view实例,那交给他有什么特点呀?哎,好处在这儿看着,一旦你把动态的数据交给了view实例以后,通过某种办法,你把艾特硅谷改成了学校的中文名叫上硅谷,那么你就会发现啊,在页面里面,只要你用到这个name的地方,它就自动更新了,不用你去操作盗了,明白不?它们之间的仿佛有一个隧道连接着它们这边一变,诶,页面自动就变,老师呢,我想看看data里的数据怎么变,那它这会儿能体现出来,它也跟着变呢,说老师这样吧,我弄一按钮,哎,交点我更换。
12:32
学校的名字,老师这不就得了吗?但是你听我说啊,同学这样做呀,当然是很好,但是我们还没有学5U中如何去绑定事件,我们还没有跟你讲啊,其中里边包含着那个数据代理,所以说这会儿呢,咱不能这么写,现在还以咱们的知识量达不到老师那你怎么办呀,你看着这时候啊,有一个人呢,就派上用场了,谁呢,看着我打开。就是VIVO的开发者工具,好同学啊,打开控制台,如果你成功的安装了这个,那么在你的这个里面就多了一个选项,叫做VIVO的开发者工具来选择它,那你听我说VIVO的开发者工具啊,给你提供了很多的功能,我们暂且不关注红色框里的后边的这些选项,我们目前只关注什么呢?蓝色框里这个你观察一下这个图标,同学有点像什么呢?是不有点像倒结构?
13:19
哎,所以说同学第一个选项卡呀,就是让你观察结构的,让你观察什么结构呢?其实是让你观察呀组件结构,但是我想问各位啊,咱是不是还没学组件的呀,所以说你就简单理解各位,这个第一个选项卡让我观察结构的那组件我没学,但是现在我手里边有一个什么东西,手里边我是不是有一个view实例啊,老师那V实力在哪呢?诶在这儿呢,它就是那个view实例,你可千万不要觉得啊,老师这个root的意思是那容器,各位这root跟容器没啥关系,你注意看它那个R是大写的。说老师是不是你那个容器是小写的肉,这边就变成大写的肉,哎呀,可不是啊,各位瞧着我把容器改成DEMO,那我这是不是也得改,改成DEMO吧,你回来你自己看,同学你刷新它还叫啥?所以说这个RO跟你的容器那个RO没啥关系,这个RO所表达的是啥?你听我说同学叫根。
14:13
叫根根是啥意思,就是最根上的东西了,哎,也就是说什么呀,它代表的就是那个V实力,以后啊同学这个实力身上咱之前也画图了,就会出现一堆粉色的小东西,那这些粉色的小东西啊,就都是属于他的什么呢?哎,这个手下人去帮他干活的,OK,你点一下就明白了,各位看这。嗯。Date里的东西都能看见吧?Address,北京,Name at,硅谷,对不说老师,那我怎么修改呢?咱只能目前借助开发者工具去修改啊,啊,那来同学我点一下北京啊,点这小铅笔修改北京,后边加个123,注意了,接下来我会点击这个按钮,然后你观察北京这个地方啊来,回头这点击走,同学看用到北京的地方是不是自动变成了北京123呀?哎,同学,这不就是验证了这么一回事吗?什么事儿?Data中的数据只要发生变化,页面中用到的地方是不是自动就更新呀?同学,咋的,是不是比你自己操作盗墓要省心啊?哎,那看你刚才听没听懂,我想让他展示的学校的名字呀,全都是大写的,当然你不能这么跟我说啊,老师,你把它变成大写的对吧?这不就得了吗?那这我还问你干嘛呀,对吧,好了,同学也就是在这,我可以点to。
15:24
Afterca,对吧?回头看是不是变成大写的了?哎,那同学你发现了这是什么呀?表达式啊,是一个什么呀?函数调用表达式对不对?哎,好了各位啊,那这个date.now呢,我就先撤掉了,只是用这个呢演示一下问题,好吧,好了各位,最终呢,我们还得进行一波总结,那咱说了总结性的东西啊,咱就不一点一点敲了,打开我提前写好的总结拿过来好了,给它往这儿一粘,这个编号呢,咱们给它重新调整一下,这是第四个,这是第五个,这是第六个,这是第七个,好了,读一下从四开始啊各位,View实力和容器是一对应的,刚才说过了,真实开发中只有几个view实例一个,并且会配合着谁组建一起使用,以后会讲到组件的,再说第六个。
16:07
花括号花括号叉叉叉中的这个叉叉叉要写什么呀?GS表达式你不能瞎写,你写个判断不行,你写个循环不可以对吧?而且再读后半句且且怎么的叉叉叉可以自动读取到data中所有的属性,注意哦,各位,之所以你能直接写name就能读到这个name,是因为人家底层做好的,明白不?你写就完了,你写内幕它就能看到这个内,对吧?由于name幕是个字符串,那字符串难道不能调to upper kiss吗?是可以的,对吧?好了,再读第七句,一旦date中的数据发生改变,那么模板中用到该数据的地方也会自动更新,其实最终的同学它影响的是什么呢?是页面对吧?模板变了就重新解析,解析完了再重新放到页面,页面是不是就变了呀?所以这咱们写最终的那个影响啊,最终影响的其实是页面中用到该数据地方会自动更新,这就是这些小的细节上的问题,然后呢,我们再说最后一个小小的问题啊,同学我问你。
17:08
我引入的是什么view啊,是不是开发版本的view啊,哎,那同学说了,老师你还没给我验证一下,我要是用生产版本的这个view,那会怎么着呢?瞧一下各位假设呀,我犯错了,我没有用new关键字啊,去调用这个,那你看着啊,如果你引入的是开发版本的view,你回到这儿,同学观察控制台去。你看啊,他说什么呢?你读这句话,他说view啊,是一个构造函数,一个构造器,你应该调用这个view通过什么关键字呢?New这个keyword这个关键词,同学你看这个提示的还不够明白吗?对不对,然后再往后吧,这你就别看了,说老师是view里边的五千零,其实吧,这你就别看了,这个呢,就是直接报的底层错误了,你像这个同学,你觉不觉得是咱们程序员可读的一种错误啊,可从这个错误里边捕获到一些信息啊,你说对吧?哎,那如果说各位你引入的不是开发版本的V,你自己瞧,你引入的如果要是生产版本的V,你自己瞧吧,刷新各位刚才那个良好的提示没有了,他直接就给你报底层的错误,那你说这个是不是不友好啊,咱都不知道自己哪儿错了,你说对吧,哎,回来所以说我们,诶开发的时候一定要引入什么呢?开发版本的,你说对吧,还有就是呢,各位你这不用纠结,你说老师凭啥用new,这是人家的规矩啊,你不用new是不可以的,人家底层写了一个校验,人家校验什么呢?校验这个里的this。
18:31
到底是不是实例对象,哎,那你看一下各位,你找到这个view,然后呢,看5073行,它是不是定义了一个function view,是不是view的构造函数,你看里边它写了个啥,是不是刚才你看到那个东西说view是一个构构造函数,然后你应该使用new去调用,同学你说我把这改一下来,比如说举个例子啊,我这么改说哎你啊干什么呢?对吧,咋没有用new关键字呢?那你看一下啊,来回来我引的什么版本开发版吧,来不用用,那你瞧一下各位刷新,你看你干什么呢?对吧?同学,其实它就是写了一个判断,你看看它怎么写的,各位很简单,你看这儿啊,简单看一下同学写了判断,如果这个function view里的this。
19:16
它不是view的实例对象,那这个时候就要报这错误了,那什么时候不是呢?很简单,如果你基础过关,你就明白,你不用又去调用这个view,那你说这个view里的this能是实例对象吗?不可能对吧?哎,OK,那咱就把这一小点呢也给大家说完了,所以说你看啊,这么一个简单的案例,我们还能总结出来很多东西的啊,这都是在为以后呢进行铺路好了,那这小节呢?
我来说两句