00:00
好嘞,各位,在这一小节呢,我们先不按照课件的顺序去走,给大家穿插一个小的知识点,就是EL与data的两种写法,正常来说呀,我得讲到组件相关的知的时候啊,才会跟大家聊这个东西,但是鉴于view里面组件相关的知识太多了,要是把所有的东西都压到这儿讲吧,大家的压力就太大了。哎,所以说我把这些能够拆散出来的小点呢,提前跟大家说来,大家呢也适应适应,很简单啊,来打开我们看一下,做一个简单的效果,页面上有一个H1啊,内容呢是你好,上硅谷我就直接写动态的数据了,我得创建一个view实例,以后我就不再自己一点一点写了,我得new一个实例,我得传入配置对象,太麻烦了各位,我直接用我的代码片段V1就生成了,直接写内幕,直是上硅谷,如果你也想配置呢,可以来到这个里面有一个选项叫做。
01:01
用户代码片段OK,好了保存打开看一下效果啊。效果是正常的,控制台也没有错误,好了,最小化,我们说说之前我们是利用EL啊这个配置项,让你的view实例和你这个红色的容器啊进行了一个什么呢关联,其实你可以不在32行啊去写这个EL给它注掉,当然你要掉它,你就得用另外一种方式去替代它,你不可能说只是把它,如果你真的只是这么写,各位那就有意思了。你绿色的实例跟红色的容器并没有进行关联,你说对吧,那你看页面就是这么一个效果,你那些模板其实没有人给你解析,那当然他肯定不报错是吧,因为view没有开始工作嘛,好了,回来各位,那就得用一个方式去代替是吧?哎,说说怎么代替各位,首先啊,你得接到这个view实例,我就用V去接了啊,然后呢,输出这个view实例,注意啊,我输出的是view实例,而不是这个view构造函数,回到控制台上刷新瞧。
02:10
这就是有实例对象。这是我们在学习的时候第一次去看见这个view的实例对象,我们以后呢还会看很多次啊,那么现在呢,我们先简简单单的看一下,打开。他身上呢,有很多的属性和方法,但是有一类属性和方法呀,很特殊,就是我红色框里的这些,你发现他们都有一个共同的特点。都是以什么开头呢?Dollar符?说说啊各位,所有红色框里面以Dollar符开头的东西都是view为我们程序员准备好的,哎,说白了吧,都是给你用的。那么所有这些不带Dollar符的,那都不是给程序员用的,说老师那就没用,诶不是这意思,不是给你用的,但是底层在用,V自身在用也是非常重要的,你要是把这个里边的东西你删掉,那可能V就没有办法工作了,对吧?好说老师,那你要用红色框里的哪个呢?听我说啊,红色框里面并没有我想要的东西。
03:15
我问各位啊,我输出的是不是那个小写的V,是view实例对象对吗?红色框里面所有的东西是不是都是他自身上的,而我要用的东西呢?听我说没有在这个实力身上,而是在这个实力缔造者的原型对象上。这是实力,这是实力的缔造者,它原型对象上的方法和属性,那你说它是不是都能看得见呀,哎,那所以说我们往下滑,在这儿呢,走,你看又出现了一堆Dollar符开头的,那我用哪个呢?看我用这个Dollar符,Want。你先不用琢磨那个mount是什么意思啊,一会我给你解释,好,回到我们的代码中,同学瞧着啊,v.Dollar符mount老师,这意思就是我曾经得用EL去指定这个容器,然后现在不用EL了,用这个Dollar mount也能去指定容器,哎,就是这意思,回到页面瞧,也能出效果,说老师,那这两种方式我用哪个呢?随你的便,你想用哪个都可以,只不过这个第二种呢,能灵活一点,什么叫灵活一点呢?我们看一下各位。
04:30
你看我把38行拿走,我写一个定时器,我让他等一秒钟,然后再执行这句话,那你说这么写是什么意思呀,想想各位容器呢,准备好了,实力呢也准备好了,数据呢也维护好了,但是就是它俩之间不做关联,对吧,等了一秒钟,你掉了40行代码,然后他俩之间就关联了,然后这个模板就拿到了,然后它就解析了,解析完的这个结构呢,就放到页面上去了,哎,保存一下,你回来看到的效果就是刷新,等了一秒钟。
05:05
是不是才回来,哎,所以说其实你用哪个都可以啊,只不过这个呢,就是你在new的时候就得想好你到底为哪个容器去服务,那这个呢,就是回头再指定对不好,那我们把这定时器呢,给它删掉,就是演示一下这个问题,好那这个其实就是我们所说的什么呢?第一种写法就是new的时候直接就写好这个EL,那这个呢,就是我们所说的A,叫做第二种啊写法好,那我们再说说这个词儿吧,为什么叫做mount呀。其实也好理解,各位,你看这是你的红色容器,这是你的绿色的view实例,把容器里面所写的模板呢交给view实例进行解析,解析之后把解析完的内容重新的放到页面的指定位置上去。我刚才说了一个关键的字啊,叫做放到页面的指定位置,我们如果说的官方一点就不叫放,叫什么呢?叫挂载,这个Dollar for mount就有挂载的意思,我们打开有道词典,你搜索一下mount,你看是不是有挂载的意思,哎,所以说这回就明白了,为什么他要用这词吧。好,那我们探讨的第一个问题呢,就结束了,就是EL的两种写法,你用哪个都行,好把这块呢住掉,我们探讨第二个问题,哎,就是date。
06:33
的两种写法,好,我们还是啊,弄一个view实例,写好我的数据,好,我们之前所写的这个date呀,都是写成对象的形式,对吗?这就是我们所说的第一种写法,哎,什么呢,叫做对象式。前边加个修饰词吧,叫做贝的第一种写法,对象式,其实还有一种写法叫做函数式,我们写一下啊,把这堆呢给它复制过来,第二种写法。
07:10
函数式写写啊,顾名思义呢,就是把你的data呀写成一个函数,而且注意它有要求。这个函数必须要返回一个对象,那么对象里面的数据呢,就是你所需要的呗,那比如说我原来有name上硅谷,那就写在这儿呗。那你看看各位啊,第一种写法呢,就简单而又粗暴。你需要一个对象,我就直接写一个,里边配数据就可以了,那么第二种写法就是我先写一个函数,哎,这个函数有返回值,返回值是你真正想要的那个对象是吧?好了,保存回到页面看效果,一切是不是正常呀,那大家肯定有一个想法,老师,那你放心吧,我肯定不用函数式的date,我一定喜欢用对象式的,因为它简单呀,但是呢,这就得跟大家说一下了,你像EL这两种写法吧,那真是你用哪个都可以,但是对于data的两种写法,各位您听好了。
08:13
等以后我们学习到组件的时候,你必须得用这种麻烦的函数式,不能够使用这种对象式。现在当然无所谓啊,你用哪个都行,对象式也行,函数式也行,以后就不行了啊,老师为什么不行啊,因为他会报错,那报什么错误呀,等以后我们再进行一个仔细的分析,现在先知道就可以。但是这里面有一个细节上的问题,我问各位啊,你说data属性它的值是不是一个函数,那我想问的是,这个红色的函数是你调用的吗?不是,那是谁帮你调的呀。那V帮我调用的,我就想看一下这个函数里的谁呢。
09:00
好,前边呢,给你加一个分隔艾特符,注意观察啊,回到页面中,同学,你发现啊,艾特符后边跟着的是什么呀?View实例对象。所以说你发现啊,这个data函数中的this是谁呢?写好此处的this是实例对象好。但是前提建立在啊,你要把这个data呀,写成普通函数,如果你要这么写,各位那就毁了,你说我的data是不是函数,是,但是我写成了一个什么箭头函数,那这个时候你注意观察,就是全局的window。为什么呀,箭头函数没有自己的Z,那就往外找嘛,那往外找就找到了全局的window嘛,所以说各位啊,我们有一个小要求。就是这个data函数,你不能够把它写成箭头函数,必须老老实实的给它写成什么呀,普通函数,但是一般来说呀,很少有人就这么写,因为这么写麻烦,我们一般在一个对象里面写方法是不都删掉方式删掉冒号啊,这回是不是可以啊,好,你看还是谁呀,哎,这个view实例对象说老师那我就写箭头函数能怎么的呀。
10:17
This是window,就是window呗,目前你觉得this是没啥影响,但是以后这个影响就很严重了。好,那这个date的两种写法呢,我也给大家说了一下,好把这个呢折叠起来,大家得会看咱这代码啊,这个单行注释下边跟着的这个绿色这一片区域都是在说这个里边的东西,好,我们回到上方来一个总结,各位贝与EL有两种写法。EL2种写法呢,第一个就是new的时候传入EL属性,那第二个就是先创建实例,随后再这么的去指定是吧?Data呢也有两种写法,一个叫对象式,一个叫函数式,那如何选择呢?目前用哪种写法都可以,以后学到组件的时候,各位data必须用函数式,否则会报错,那个时候我会详细的给你讲解,为什么它要有这个限制,好同学有一个最重要的原则,我们发现了。
11:13
由所管理的函数一定不要写成箭头函数,旦你写了箭头函数,那么this就不再是view实例了,而是什么呢?Window?说老师什么叫做view所管理的函数啊,你现在就学了一个谁函数式的data,这个函数就是view所管理的函数,只要是view所管理的,哎,你就一定得遵循这个原则,以后呢,我们会学习到很多很多由V所管理的函数,目前你没学别的,只学了一个这个data对吗?好,那这一小节呢,我们听一下。
我来说两句