00:02
好,我们把我们的课件把它打开。这个是view的一个简介啊,稍等一下啊,一点半再点一次。这个是为了简介,我就不再带,带着大家去看了。啊,然后他的官网也有一些介绍。好,我们直接来看一下它如何来使用,实际上是这样的,同学们,我们之前我们在进行DOM操作,我们在进行编写javascript代码的时候呢,我们基于的是do或者boom进行操作,那么其实呢,它的代码量还是比较繁琐的。那么我们有了view之后,有了view之后,View可以帮我们解决这个问题,它可以帮我们解决我们的数据和节点,或者叫do,或者报节点,它们之间的一些绑定关系,对应关系。我们只需要去操作view当中的对象就可以相当于操作我们节点的内容。啊,这个大家今天学一下,其实就能体会到了,咱们一起来看一下他怎么来操作。好,这边要求我们的是在HB里面进行操作,咱们就不安装了,这个HB的还是稍微有点大的,如果大家感兴趣啊,可以去安装,我这边反正有。
01:01
啊,其实是一样的,咱们用ID就就可以直接使用了,那行现在呢,我已经在ID里面新建了一个项目。然后呢,我在web下面,我就新建一个HTML。好,我就称之为叫代零幺。啊,就称主叫代码零幺。然后呢,首先第一步,我需要在这个地方把我们呃,View它的一个它的一个JS文件,我们需要把它导进来。SC。那么我就把它放到script这个里面,叫view.gs。啊,所以呢,我在这个地方新建。新建一个叫script,然后呢,我把架包把它拿过来,不叫架包了,其实就是JS了啊,找到library,我们找到view。View。这个吧,或者用这个也行,随便你用哪个啊都可以好,然后另外一个顺顺便我也把它加进来算了,另外一个是叫access。有吗?这个是吧,A开头的就这样两个我全加进来行不行,同学们啊,先把它拷进来算了,行,根据V粘进来了。
02:09
那么我们先来看一下view view,第一步我已经把它导进来了,第二步我准备去写。我们的JS代码来。我刚刚说过,View能够很好的帮我们去解决。操作某一个节点内容的这么一件事情。需要大家慢慢的去体会。比如说现在我来写个div。ID,比如说我写个DV0。这里面比如说我写个。我暂时先写个SPA,我这边写个hello啊。就这样的下面呢,我想操作这个SPA里面的内容,我怎么去操作呢?你看一下,首先window.onload。这个是不是指的是当页面加载完成的时候,我要去调用这个匿名函数啊。好,在这个里面注意看VR view等于new view,我创建一个view对象,然后呢,在这个地方我写了个大括号。
03:03
我写了一个大括号。啊,这个大卦其实就是KY6KY6舰支队。然后在这个里面注意看我再写一遍。六六我先写小括号,分号,先把它补全了,然后在它的内部写个大括号,表示内部,你可以认为哦,这是个对象。啊,你可以认为这是个对象。就像什么呢?同学们,比如说大家看一下啊,就像就像这样的,同学们,你看VR person等于。第一个,我可以通过new object可以创建一个对象。那对象有哪些属性呢?我们可以这么写,比如说PID。等于P001。啊,比如说它有一个PID属性PM。等于比如说Jim,哎,在他第二个属性,他有没有什么行为呢?比如说他有c hello这个行为。C等于function。在这个当中,我就alert一下,比如说hello。
04:01
那大家看一看,这样我们是不是就定义了一个JS对象,然后给他绑定了两个属性,绑定了一个行为是吧?同学们,然后你可以在下面,可以在其他地方,你可以调用这个对象的属性,或者调用这个对象的行为都可以的。啊,是没有问题的,比如说我先简单写一下,比如说我在这边input type等于button。好,Value。比如说我写个叫打招呼,意思一下啊,On click。我就。就这样的。啊,我就写个好的方法,那行这好的方法没有啊,那行呗,在这边写一个。Function。Hello,在hello里面我可以写p.c hello可不可以?我可以调用这个对象的c hello,方法行吗?同学们,好了,那你看一看,咱们要不现在进来运行一下看看。啊,看一下这个这个按钮,点一下它能不能调用这个方法,然后能不能执行这个对象的c hello。呀,我这对象怎么没有啊。
05:02
Input type button啊。Input写错了,看到没有?写错了啊。真是的。写错大家提醒我一下啊,你看点一下它啊,出不来啊。啊,我看一下为什么出不来,稍等一下啊,点错了右键检查。好点一下它。往上拖一点。他告诉我说,哈洛,Is not DeFined。Hello is not DeFined,它没有定义啊。哎,他说他没有定义,Hello,这不在这儿吗?不好意思,简介放到外面去。写错地方了。啊,写错地方了,我们这是一个加速的剪切。拿过来。把它放到外面去,哎,这样就可以了啊,这个先不管它啊,这个先放一边把它遮起来。就这样的,我第一个方法,我还第一个对象,这个对象给他绑定俩属性,绑定一个行为是吧,同学们再来再刷新一下,这次就没问题了。再点一下hello是不是就出来了,你看hello了,它就有了。
06:01
好,再来。那么这个对象我这么去定义。再来。再来。VRP。等于大括号。啊,我写个大括号,然后PID。PID冒号P001。好,PM冒号G。好,我再写一个c hello冒号,Function。嗯,这么一个竖线稍等一下啊,然后一下。好,我把它A一下啊,谢谢,Hello。好了。然后我们再来稍等啊。点一下它。我们看一下是不是也能弹出来啊。诶,老师怎么它也能弹出来的,这是我们定义一个对象的第二种方式,你看这个对象是不是等于一个大括号呀,哎,这个大括号代表的就是一个对象,然后这是它的一个属性,Key冒号value key冒号value key冒号value哦,这个value是一个方显,是一个方法,那说明这玩意是个行为,前面两个是property是属性。
07:11
就这样的啊,这是我要不我把注释写的知道吧啊。好,这是定义。JS。对象。对象。方式一。好,再来根据C。定义JS对象方式二。好,就这样子。OK,那行吧,咱们这个看完就算了啊,我把它注释掉了,不要他了。好这样吧,啊这样。这边我就这边我就不动它。我把这个view我暂时先重新拷贝一个就算了啊,在第二个零二里面去写。好,这样代码零一,我就算就算这个JS对象吧,啊就这样就行了。
08:01
好了再来,下面我在零二里面去写。好在DEMO02里面那这些玩意儿我就全部删掉了啊,我就不要他了。我就全部删掉了啊,再来。现在呢,我引入一个view,然后呢,这个按钮就不要了。我这边有个span,我说过我想操作这个span,它内部的文本值。好,注意看我在这边定义一个对象,是不是又这个view对象大括号,这里面我要需要一个,需要什么呢?第一个看好了,它是固定的,叫E。叫什么叫element?哎,叫元素,那么这个元素呢,我可以写个井号D0。井号就表示ID。ID嘛。如果我写的这个点是不是就表示class啊?哎,有印象吗?同学们啊,OK,也有表示当前这个V对象它可以听好了,它可以和这个div RV进行绑定,因为这个divv它的ID是叫div rv0。啊,就可以和他绑定,然后在我们这个view里面,它有个固定的叫data。
09:02
Date是什么?Date叫数据。Data就叫数据。然后我可以在这边写个比如说message。Message,当然了,这边你加双引号或者不加双号都可以,比如说这个date老师,你怎么不不加双引号啊,你可以加,你不加也行,没关系的。啊,然后在这里面,在这个里面。比如说我来写一个叫message冒号,我写个叫hello。你注意看我是不是定一个message叫Hollywood。好,Message是一个key hellowood是一个value,你看好了,这个hello,我把它删掉。大括号大括号message。这个大括号,大括号就是我们view当中和message这个属性绑定,那么和谁的message呢?哦,和这个ED0它所对应的,那么这玩意儿和谁绑定呢?哦,在这个范围里面有效,因为这个是DIV0。假设你个你这个SPA你放到外面去,它就不起作用了,因为你这个E你的范围是DIV0啊,是不是这个范围啊,那在这里面是不是可以用,在这个div里面是不是可以用message啊,但是你这玩意跑到外面去不行的,一会咱们来演示错误的情况啊,咱们先把正确的情况先演示一下。
10:12
就是这样的。好了。我们先来看一看它能不能给我们运行出来。你看一下是不是有个叫哈洛的呀,那如果我把这个值改掉。如果把这个值改掉,我改成加hello,加三感叹号,我们再来刷一下这个页面。你看一下他这个span里面的值是不是就变化了,那是不是已经意味着同学们我还需要再通过JS代码再去去找到定位到什么span,定位到span之后再通过什么in the text去改变里面的值吗?没有必要。将来我只要考虑,我只盯着这个message这个值就行了。我想改变这边的值,我只要盯着这一个变量,我只需要盯着这一个变量,能听懂吗?这样可以省去我们很多的JS代码。这就是我们VIVO一个非常强大的地方。
11:00
好,我们演示一下错误的情况,我把这个SPA放到外面去。我们再来运行。你看一下它是不是就不对了,它就直接显示大括号,大括号message。好,稍等一下啊,我把这边先清掉,我们刷一下,他这边应该没有错误啊,你看不出来也错误,但是他这已经原样输出了,说明人家没有指定的这个key嘛。对吧,因为你已经超过这个范围了。OK,再来。把它挪进去啊。好,所以说这个非常简单啊,我想去绑定它内部的文本,诶,我通过这个变量。再来。所以这边课件的话,大家自己课下去看啊,我就不带着大家去看了。往下走,所以我们这边就演示了,比如说这边有个message啊,我这边data data里面我通过这个message,诶可以去进行指定,就这样子。OK,行,下面咱们再接着再来看。下面一个叫绑定元素的属性。绑定元素的属性,我们可以通过V-B的来进行操作。
12:02
啊棒的这个单词就是绑定的意思。比如说我们一起来看一下。代码零二,我直接在这里面写了啊。比如说我在这边写一个input。Type等于type等于text。好了。我正常情况下我写的是value value应该等于一个值嘛。比如说我写个利好,本来应该是这样的。那么现在呢,你看好了V杠。棒的冒号。哎,我写了个叫V杠棒的冒号value,然后这个里面我就可以写个值,比如说我写个叫u name。就这样的,我姐写的叫U老师,U是什么?什么是U呢?好,U name就是我在data里面所定义的,我在这边我来写个u name。冒号,比如说我写个叫张三丰,哎就这样的,注意这边是逗号啊。这个就是大括号,大括里面如果有多个key冒号value key冒号value key冒号value之间以逗号分割,最后一个key冒号value后面没有逗号。
13:09
啊,要慢慢的适应这个规则,因为现在这个叫杰森这个格式,这个风格咱们还没有介绍呢,大家先慢慢去熟悉啊。再来。现在我们再来点一下它,你看一下。这里面说就显示张三丰啊,哎,这就是我绑定叫V-B的绑定它里面的value。哎,就是这样的。那么这个V-value呢,我们也可以把V杠棒的可以把它省略掉,直接写一个叫冒号value。这也行。这也是没问题的。所以我故意把这边写成不一样的,比如说我写个叫鸠摩志,你看一下页面上有没有展示啊。刷新一下是不是一样的呀,哎,他一样是可以的。啊,没有问题,这叫V钢棒。我写在这。
14:01
啊,V杠棒的。表示绑定属性,表示绑定属性V-B的可以省略。好,表示绑定value属性。V杠棒的可以省略。啊,也就是直接写成冒号value啊,就这样子。好了,这是我们介绍的V钢棒的。再来。V杠棒的叫绑定元素的属性,下面一个我们介绍一下,叫双向绑定。叫威刚宝岛。叫双向数据绑定,稍等一下啊。叫V-model。那这玩意儿有什么用呢?咱们一起来看一下啊。好,代码零二我就不动它了,我把代码零二拷贝一份,根据C根据V03注意看。注意看啊,我现在同学们。DR为零不变。
15:00
这是D0对不对?好,这是data,注意看啊,这个SPA就别要了,放在这边咱们别要了啊。SPA我想一想啊,SPASPA放在这边也没啥事啊,这样我加个换行。好,这个叫SPASPA这个叫。他这个叫message是吧,叫message。那行吧,Message就message吧,啊,不要了,删掉了啊。好,他绑定的是message,注意看啊。Input。Type等于text,本来我这边写的是V-B的,注意我现在把它换成V杠。Model。Model,然后这边我写的叫message。好,我这边写一下注释。V-model。指的是。指的是双向绑定。也就是说。
16:00
也就是说之前,也就是说之前啊。之前的Z杠棒。V杠的是单向的是什么呢?是通过。Message这个这个变量的值。来控制input框。是不是input输入框。好,现在。V报道。啊,不仅message来控制input输入框反过来。反过来,Input输入框的内容也会改变message的值。能听懂吗?好。下面咱们就来演示一个有比较有趣的一件事情,我这边是message,这是一个span,对不对?你这个message现在是不是叫HELLO3个感叹号,所以你这个span里面显示的就是HELLO3个感叹号,没问题吧,同学们。
17:01
其次,你这是个input v刚包,它具有V杠棒的这样的功能,所以你的message示的于哈三感叹号,那这边显示的value值也是HELLO3感叹号,也就是说输入框里面显示的也是HELLO3感叹号,能听懂吗?好,下面我要做的事情是我改变一下输入框的值,我把它改成hello word,我改变hello word,是不是反过来它会改变这个变量的值啊?那也就意味着message变成hollwood message变成holl,是不是意味着这边就变成Hollywood?那么它的效果是不是就是输入框里面输啥,这边就显示啥。能听懂吗?看一下效果,想象一下啊,咱们看一下效果。现在hello word3感叹号,你看我删删内容啊,我删。能看到吗?哎,我写个你好,哎是吧,你好,记得你看你一说内容是不是上面也会变啊,那我问一下是这个音input光直接操作到上面的吗。不是的,是不是,而是我的input框我是双向绑定,和我们message那个变量绑定了,我的输入框的内容改变,导致message的值改变,Message值改变就导致上面的值随即就改变了。
18:05
是吧,同学们好,所以大家现在应该能够体会到这个叫v model这个作用吧。它指的不是和他的这个双向绑定啊,它只是当前这个文本框里面的这个值和这个message变量对吧,双向绑定,只不过咱们通过这个span能看到这个效果吗。好,这叫VGA model。再来。我们看下一下面一个小的知识点。这边有这边有v value叫可以省略。本来我们用的是VGA model。冒号value哦,冒号value可以省略,还有一个叫tri,这个tri大家简单看一下就可以了啊trim我们在Java当中字符串当中也有这个方法,我们可以去除首尾的空格嘛。对吧,去除首尾的空格行,这是两个小的知识点。咱把它写在这。
19:00
V杠,第一个V-model value啊中。冒号value可以省略。直接写成威刚报道。所以上面这玩意儿,咱们把它注释掉。注释。换成下面一个,从这根据C。好,然后呢,把这个。冒号value室内可以吧,同学们直接把它写成这样。啊,其次再来。第二个。Trim。可以去除首尾空格。首尾。啊,可以去除首尾空格。这个。所以我们可以直接写一个叫点券试试。Trim。好,那现在咱们再来看一下。点一下它。你看我在前面加空格加。上面有变化吗?上面没有变化它,因为它会把它空格去掉,而且当你失去焦点的时候,它会自动的给你去掉。
20:05
我在其他地方失去焦点了,是不是啊,他前面空格就没有了,你在前面加内容,后面加内容。我也加了很多空格啊,光标已经跑这来了,我把挪到外面去,失去焦点,你看前面没有了,后面是不是也没有了?再来。这叫点啊,OK。好,那我们看下面一个小的标签。下面一个标签叫条件渲染。叫V杠、if以及else。V-if以及V-else,那这个比较简单了,If就表示如果嘛,Else就表示否则嘛,还有一个标签叫V-show,咱们一起来看一下啊。Can you see you。304。好。OK。嗯,下面呢,我在这个地方,我来写个div。
21:02
我在这里面写个div。NBSP这个div,我给它显示个样式。比如说200PX。高度200PX。呃,把它的背景颜色,把它写一下background color背景颜色,比如说我们用一个这个颜色吧。行,这是个div。注意看啊,注意看,在这个data里面,这个message,要不我就不要了啊,重新定一个变量,重新定一个变量叫number。Number末的情况下,我让它等于一。Number默认我让它等于一看好了,我在这个第二遍里面,我写个东西叫V-if。表示如果,如果NUMBER100分号二等于等于零是不是?如果你是个偶数啊,如果你是个偶数,哎,就显示这个第。那如果你不是偶数呢,这个if是不是就不成立啊?不成立会出现什么情况呢?行,咱们一起来看一下。就不显示嘛,是吧,同学们行点一下啊。
22:01
好,现在是不是不显示啊,哎,这个一点好奇怪哦,咱们没没办法让他,让他这个能够展示出来,写一个二,再来看一下刷新。是不是就出来了,那行,那咱们结合咱们前面讲的input type等于text v杠,Model。V杠,Model number。MO。来试试啊,咱们一起来试一下。那知道是啥意思吗?这是不是输入框,输入框我是不是可以用户这双向绑定,那也意味着我输入的值可以改变上面那么的值哈,改变那么的值就会导致这V-if里面那么的值就有变化,一变化就会导致这个DB一会儿显示一会儿不显示,能看到这个逻辑吧,行刷一下吧,现在是能显示的来。写个23不显示了呗。
23:01
写个二是不是就显示了,24也能显示25是不是就被显示了。你能知道啥意思不行,右键给大家检查检查,给大家看一下代码啊。看一下代码,代码大家会更清晰,好就看A的就可以了啊打开现在我输入个二,你看啊,这边有div,能不能看到D里面是不是这边一个div。这个D是不是就是这个绿色的,这个绿色的这个层。是吧?注意看25,注意看啊25。不是注释没了,注释里面没啥东西,没东西啊,就没有了。改成数字二,是不是第二就出来了。所以你能,所以你应该能够知道V-if,就是说当不成立,那这个就没有呗。行吗?啊V跟它指的是如果这玩意不成立,条件不成立,整个DP就都没有了。那行吧,咱们再写个加B,还有一个叫else。咱们把这个else咱们也来看一下,那北方二等于等于零。
24:01
好后面拷贝一下嘛啊。好,我把它颜色把它改一下。呃,颜色,咱们写个什么颜色呢?用个不一样的颜色啊。来个这个颜色,行,就这样吧,我们有俩DV。也就是说,你这个值如果是偶数,我就显示上面这个,如果你不是偶数,否则我就显示下面一个,没错吧。行,刷一下吧。首先先是绿色的。然后23是不是就显示这个。啊,一个是奇数,一个是偶数,哎,就这样子。啊,没问题。所以你看这它是不是这个D,下面这个DRV一直在变啊。啊,就这样。你看它就在变。啊,没问题啊。行,那V-if和V-else咱们写完了。嗯,我在这边加个必要标签。我加了个换行。灰的啊,刷一下。
25:00
23,诶。二怎么和刚才效果不一样了?这这这啥情况。好了,V-if和V-F之间不能有其他的节点。行吗?同学们不给插入其他技能。我把注释掉行吗?把它注释掉。刷一下。23可以吧,没问题了吧。就这。那咱们再来看一下。叫V杠。叫V刚秀是吧,那V刚秀是啥意思呢?咱们再来写一个。从这到这,CTRLCCTRLV,我把这个if把它改成V-Q。
26:02
V杠锈,当你如果是偶数的时候啊,我就显示这个div,这div重新改个颜色啊。来个紫色。好,立刚秀请大家看一下。请大家看一下源代码啊,打开这样为了大家这个看的更方便一些,我把上面这两个DV把它全部注释掉行不行,同学们。暂时先注示啊,这样大家会看的代码会更清晰一些。好,我圈注释了啊,就只有一个硬input的,还有一个V刚修行吗?同学们变形看一下啊,刷一下。好,现在显示紫色。显示紫色,因为这个是偶数嘛,所以它这是成立的嘛,打开里面会有个div。我们刚才那个if v-if,如果if不成立,是不是第二批就没了。啊,如果刚才那个是不成立就没有了,现在咱们再来看一下,我说23,你看一下这第二遍还在吗。这DY还在的,他只是给你加了个属性,叫display,等于now。能看到不加了一个display等于呢,那说明V杠秀它用什么来控制来控制啊,是不是通过这个样式叫display来控制啊,也就是说这个点其实还在这个节点,在我当前这个这个document的文档里面,其实还在,只是它的样式设置为now。
27:12
是吧?同学们好,这叫V杠秀,OK。好,那这个小的知识点咱们也说完了。回到这。微干秀是通过display属性来控制啊,来控制这个div的显示。这个点位是否现实?好。再继续。我们来看一下下面一个,下面这个比较重要。这个叫迭代。叫迭代。迭代,我们使用的是叫V-four。V杠,For for,循环迭代,我们之前的time里面用的是冒号,那这边用的是in啊,这两个我经常会经常会记混了。
28:04
啊,我们view里面用的是in time里面用的是冒号是吧。那行吧,表示我当天我要迭代这个集合,我要迭代这个集合,它里面的每一个变量,哎,都付给这个叫这个是临临时变量,然后我们就可以对float进行操作。就是这样的,那行,那咱们这边就不看了,我们直接来操作。TCV。W05。好,打开。好了,那我把这边全部把它删掉。Table。嗯,Table,然后呢,这边有个TRTR里面有有吧。名称。单价。库存。库存。
29:00
备注。行,就这样子,下面呢,我在这个data里面呢,我想准备一个数据,我想准备一个叫fruit fruit list。那么它是一个什么呢?它是个数组,那我用的是中国号。中括号表示的这个数组,数组里面有很多对象。能看得懂吗?那是不是表示有四个对象啊,那行,我开始在这边写了啊,名称FM。比如说F,我写个苹果。我写个五块。然后呢,还有库存是吧,库存库存F的吧,库存比如说100。还有比如说remark,苹果很好吃。好,就这样的,这第一个。那我就拷贝了啊,CTRLCCTRLVCTRLVCTRLV。好,苹果把这边删掉。然后。菠萝。香蕉。西瓜意思一下吧,啊,差不多就行了,346。
30:02
啊,怎怎么了。哦,这个很简单,其实你按住alt键,按住alt alt键把光面放在这,按住alt键,这不不就能选中了。菠萝。香蕉。西瓜。行,我改完了啊,那同学们我这边是不是我已经准备了一个集合或者是数组都行。啊,反正它是有能够装载很多数据的,那行,咱们下面就开始来迭代它,我在这边写个T2。好,TR这边我写个叫V-four。Fruit。In fruit list。这个list就是这边的list。啊,Date里面的。行。我把这个集合里面的每一个float都付给这个变量,叫float。然后我在这边写TD。
31:01
float.fm。Could you see。把这边删掉。好,然后这个叫price。这个叫F,这个叫remark行吧,同学们,那这个表格丑的点就丑点,没有边框,要不我还是加个边框吧啊。加个E。WHY?这些虽然都淘汰了,但是能用是吧,400C pen02啊或者四。SP0行吧,虽然说这些已经淘汰了,我们和前面都是用的样式表来做的是吧,同学们。就这么看吧,啊,将就一下点一下,看一下它能不能显示,你看是不是有啊,这样就能迭代出来了。好,这个虽然也淘汰了,但是也能用啊。你看这不就迭代一个表格吗?那大家想一想哦。将来我们在进行这个数据从数据库查出来的时候,我这边代码是不是就不用改,不用改啊,我是不是只要对这个变量进行操作就行了,这个变量的值就不是写死了,而是去向数据库发请求啊,去查询得到的。
32:08
怎么发请求啊,是不是通过发请求啊。是不是这样的,哎,这次发请求,然后是不是有回调函数啊,然后我是不是可以在回调函数里面再对这个变量进行赋值啊。那这变量一直一改变下面值不就更新了吗?啊就这样子。不着急,慢慢来啊,慢慢来。好,这是我们称为叫迭代。我把它写到。就到这啊。VE gone four。表示迭代。再来。当然了,我这边迭代呢,这边迭代呢,我只写了一层,就是我们float我只写了一层啊,所以float.fm假设flu下面这个还是个对象,你可以再接着点。这个应该不用我说吧,如果这玩意儿还是个对象,你可以再接着再点啊OK。
33:03
好,再来看下一个。下面我们一起来看一下事件驱动,或者叫事件绑定。好,那这个我们使用的是叫V-on。V-on就表示当什么什么什么时候啊进行事件绑定,那咱们当前这个案例里面做的是当点击的时候,把某一个字符串进行反转。好了,那咱们一起来看一看吧。You c you v代码零六。不要有太大负担啊,咱们学这个view学的其实是入门级比较简单的,不像咱们这个,呃,学前端的同学对吧,学的很专业啊,咱们做后端的,你对view需要一个了解啊,还是需要一个了解的。那行吧,我们来看一下啊,我现在呢,我在这个地方,我来写一个,我来写一个SPA。比如说我写个叫message。
34:02
我在下面呢,我再用一个按钮input。Type等于button。好,我写个叫反转。啊,我写个叫反转,那我们以前写的是on click等于什么什么是不是啊,这是我们就绑定一个事件是这么写的吧。那现在呢,他不是这么写了,叫V-on。冒号。好,我这边写个,比如说写个叫my reverse。我写的方法叫my reverse,你要注意我当前使用的是view,叫v on,那么这个小括号请你省略。行吧,同学们把小括号把它省略掉,要不然你把小括号加上去,它语法上不报错,JS是比较灵活的,这样就变成执行这个方法之后的返回值赋给他了。这是不一样的。我们把这小锅把它去掉啊,变成这样。好,现在这个data随便你留着还是不留着,随便你逗号,它还有一个叫method。叫什么?方法是叫方法,那行我们这边写一个。
35:02
My reverse。冒号function。哎,我是不是定一个my revers啊,就是它也就是说当我点击的时候,我就用这个方法。啊,我就利用这个方法,利用这方法的时候,这个message message不就有message没写是吧,那那算了吧,这个删掉行吗?同学们删掉了啊,我写个message。好,Hellowood。OK message是hello,那也就意味着SPA里面显示的是hello呗。好,那当我点击这个按钮的时候,这这个按钮被点击的时候,就调用这个方法呗,那第二个方法的时候怎么做呢?this.message首先先拿到这个message,然后点B。分割是把字母我里面啥都没写,控制不上,那就表示把字母一个一个的取出来。如果我里面写个逗号,是不是表示逗号分割啊?我写个空格,是不是以空格分割啊?如果啥都不写,表示取里面的每一个字符,取到了之后reverse翻转一下。
36:02
那就变成每一个字符都反过来了,反过来之后再效应,效应是啥哟。就是啥是不是连起来啊,就你连接的意思嘛,再把这些字字符是不是在一个字再连起来啊,连起来之后我再付给this.message。看到了吧,我再付给这个message,行,我写完了,咱们来试试呗。点一下它。点他。可以吧?这不就反过来he hello吗?W吗,Hello,我的吗?再点一下又反过来了,再点一下,再点一下,不就这样了吗?那么V杠、on冒号、克里克,我们也可以简写。表示。绑定点击事件。表示绑定点击事件。V-on可以省略变成什么呢?变成。
37:02
At click。啊,所以咱们把下面这个注释一下。OK,从这到这CTRLCCTRLV,那这玩意咱们直接写个at可以吧,同学们你写个at也是一样的,那行刷一下。点一个点一个点一个点一个也可以的啊。好,这叫DEMO,应该还来说还是蛮简单的。再继续。这个叫事件绑定,下面咱们这边还有个叫获取这个鼠标移动时的坐标啊,这个咱们就不看了,坐标呢,我们使用的是这个叫invent。我们在绑定一个绑定一个事件的时候。那么这里面的参数可以用event,然后event可以获取当前是电源的坐标。Client X和client y表示X轴和Y轴。啊,X轴和Y轴。再看下面一个。下面一个叫真听属性。
38:00
侦听属性叫什么叫卧起?卧起这单词叫真听,或者叫监视。啊,正听或者叫监视的意思。我这个date里面有几个乘序变量,然后我这个问题呢,我可以去监听这几个乘序变量,当这几个乘序变量有变化的时候,去执行它后面指定的方法。就是这样的,那么这个参数指的是你揭示的这个变量,它的新的值。那行吧,下面咱们来写个小的案例。根据C,根据V0,七。好,打开。好了,同学们,现在呢,我在这个地方,我来写一个input。Input type text。好,嗯,那就别写了吧,咱们这边写个叫叫冒号value。More value。冒号value里面我写的是,比如说我写的是叫。NUMBER1。这个是不是叫V杠棒的啊。
39:02
哎,没问题吧,是不是单向的绑定啊。啊,其实咱们这边需要用的是双向的绑定,一会儿再说啊,加上另外一个值。Cant you see you number。然后等于等于一个值。啊,等于我写个十半吧,等于一个值等于那么三。就这样的。这样我就把它写好了,然后这个date里面我得写两个NUMBER1。Number等于二。再定一个,那么三等于零。就这样子。好了。那这个那么三它显示的是零嘛。啊,那1NUMBER2它的值等于三。好,那这个下面的麦子我暂时先删掉行不行,同学们我删掉了。好,咱们现在先来看一下这个页面的效果,点一下它。显示一一加二应该等于三嘛,现在没做计算嘛,是吧,同学们咱们没有做计算啊。我把这框框改的好看一点,S等于二。
40:00
要不然显示太长了啊。S等于二行,再来看一下。刷一下变短了吧,啊一加二行了,下面我要开始操作了,同学们。叫watch监视。我要开始监视了,监视谁?我想监视NUMBER1。当当被一的职业改动的时候,Function。New new value。好,这里面变量随便你写上啊,随便你写什么变量名都可以啊。再来。当那一的职业改动的时候,我想怎么做呢?This点那么三。等于。New value加上NUMBER2能看得懂吗?那number肯定是this点啊,this.number。好指的是这里面的。再来,我再坚持一下NUMBER2。Function new value。好Z点,那么三等于。等于等于z.NUMBER1。加上new value。
41:01
可以报。我写完了。啊,当然,你光这么写完不行的。你这边你揭示它的值是不是没有达到双向板板面的作用啊,你没有双向绑定,那你这个文模框改动,你文模框改动会不会影响到这个纳一的值改动啊,不会的吧,因为你是单向的啊,单向的值值,但是上面一开始的值是不是会负到下面来哦,但是你下面的值是不是不会改变到上面啊。行,现在我来把它换一下。VV-model行吗,同学们?啊,V-model行改过来了啊,CTRLC。CTR非行吗?同学们,我改成双向绑定了,注意看啊。刷一下。好,你注意看啊。我改成21,你看一下会显示什么。一加上21,会显示22吗?哎,它不会显示22,它显示121。啊,为什么这比较简单了嘛。因为是字符串相连嘛。是吧,同学们啊,字母能相连行吗?咱们在22,你看不管怎么说,它是不是能够监视监听到啊,我在改变第一个框的值幺五。
42:08
你看那就变成幺五加上二二的值嘛,哎,就是这样的。那行吧,咱们把这个加法改成加法运算吧。怎么改的同学们?是不是?你变成变成这个数字不就完了吗?好,再来pass。这不就可以了吗?行,再来试试刷一下,一加上21,那就把22了吗?幺五加二幺不就36了吗?没错吧,同学们好,重点重点不是这个类型转换啊,重点是这个卧,它表示在监听这两个变量。一旦这两个变量发生改变,它就会调用后面对应的方法。调用对应的方法,这个参数是啥意思?这个参数指的是这个监听的这个监视的这个变量的值,新的值。
43:02
当前这个地方指的是监听属性啊,或者叫侦听属性都可以啊。真听属性。NUMBER1。和number。好。然后当。NUMBER1的值有改动。有改动时,那么需要调用后面。后面定义的方法。Value指的是。指的是NUMBER1的性质。好,就这样,那这个我注释我就不写了好不好,当NUMBER2的值有改动的时候,那么对用后面定义的这个方法,另外的值指的是NUMBER2的性质行吗?好,就这样子,这叫真听属性。OK。好,那么真灵属性这个我也把它说完了。那简化语法刚才已经说过了啊,V杠棒的冒号value,咱们可以简写成冒号value对吧。然后V-on是不是绑定事件啊。
44:00
V杠二,冒号克,我们可以写成艾特说过了吧,刚才。那行,咱们再看view的最后一个小的知识点,叫生命周期。稍等啊,这个不看了啊,这个也咱们有专门的练习,稍等一下再看下一个小节叫生命周期。胃的生命周期有这么几个阶段。第一个。第一个叫before create。叫view,对象创建之前叫before great。第二个是view对象创建了,我们称呼叫created。啊叫GR,这个对象刚刚创建,但是这个对象创建好之后,我还没给他去装载值的,叫before mount before mount叫数据装载之前。指的是数据装载之后。然后咱们还有before update,指的是你的数据有更新之前调用调用一下before update。更新完成之后,调用一下updated,最后如果对象销毁,调用一下叫before destroy以及destroyed。
45:06
这是他的生命周期,那行咱们直接看下面的这个案例啊,咱们一起来看一下。好,根据C根据V代码零八坚持一下啊,最后一个小的知识点讲完之后大家再休息。咱们还是使用这个E叫D。然后呢,稍等一下啊,第二位零在这。然后这里面咱们就写个SPA就可以了。此番将message。好。呃,那么我要去写它的生命周期,这个是这个属性的,真听我就把它删掉了。然后这个里面我需要写个叫message。冒号哈。就这样吧,啊,Message,所以这个SPA里面显示的就是hello。没问题。行了,下面我们生命周期刚才第一个是不是叫before created叫before。
46:05
是吧?Before create这第一个逗号。再来第二个叫created。这第二个。再来第三个,叫before。Mount mount before mount叫数据装载之前。下面一个叫multity的。数据装载完成。比如说我们还有before数据更新之前。Update。Function。数据更新成功之后,Updated。加ED过去式吗?然后还有before destroy以及destroyed,咱不写了,就写这么几个。好了。啊,这个指的是view对象创建之前。好。
47:01
没有对象创建之前稍等一下啊,这个注释写到外面。还是写里面去啊,算了,写外面也行吧,就这样吧。没有对象创建之前。哎,我们可以在这边打印一下console.log。Before。Before c。冒号叫view。对象创建之前。那么在这个里面,在这个里面。我们可以来看一下这个message它的值。我把message的值打印出来给大家看一下。Dialog。好打印,Message是message冒号加上message。This message,行,再来。这第一个部分。好,当然了,同学们。
48:01
嗯。Before c。啊,Before great,它指的是实力,就是我们的view。什么叫实力?就这个。好不好,这个实例创建之前。啊,咱们把这个message值打印出来,那你说这个实例创建之前,这个实例都没有,这个实例里面的data会有吗。不会有吧?那你说这个message是不是应该是。应该是什么?是不是叫undein微定义啊?还没定义呢啊,不是空不空的问题,是未定义。咱们来试一下。我们来试一下啊。点一下它。右键检查。你看这message是不是阿DeFine的呀?啊,对吧,按DeFine的微定义就这样的。再来。下面一个。
49:02
下面有个叫创建之后。叫创建成功了。咱们再来试一下CTRLC。把它放在这儿。这个叫created。View对象创建之后。那创建之后message。这个对象存在不存在呢?咱们再来看一下。刷一下啊。刷新你看一下。Max是不是就有了呀?表示这个对象就已经创建成功了。对吧,这个对象就创建成功了。下面一个。叫amount就不叫,叫amount叫before amount叫数据装载之前。数据装载之前。数据。装载之前。
50:01
啊,数据装载之前,那么数据装载之前是什么样子的呢?咱们来看一下。数据装载之前在这个地方。我们可以直接去打印下面那个span里面的in the text。行,咱们来试一试。呃,我回到外面来。我来定义一个。到了哎,算了吧,不定义直接写吧,数据装载之前看一下啊,根据C根据V。数据装载之前。把它放在这儿。这个叫before mount。好,我这边打印的是啥呢。document.get element by ID,好,我一会儿给它命名叫span.in the text是不是就是这个span的内部文本啊?它内部文本能不能把它显示出来呢?数据装载之前。
51:00
我们是不是要把这个message这个值装载进去,它这边才会显示哈啊,那么装载之前是不是就没有值啊。咱们来看一下。回到这,再来刷一次。你看一下它是不是就直接显示这玩意儿了,大括号,大括号message还被装载进去了。那行下面一个方法叫装载成功之后。数据装载之后。那我这边我就照抄了啊,CTRLC。到这边根据V,然后把这改成之后。数据装载之后。好了。我们再来看一下这个值有没有。刷一次,你看一下数据转载之后是不是就有卡了。装载之前它直接显示这个大括号,大括号message,装载之后显示hello。表示数据装载进去了吗?再来下面一个叫update update是什么?叫数据更新之前。数据更新之前。
52:00
还有一个是数据更新之后。啊,咱们一起来看一下。我们在这个地方我定义了一个方法叫change value,这个方法就是用来改变这个message的值。就是用来改变message的值,然后第一个按钮,当我点击的时候,用一下change message。那行吧,咱们来试一下。所以现在我在我在这边补一下,在这个地方换一行,我写一个message。Type等于button value叫改变的值。啊,叫改变message的值行。那么给他绑定一下click。我调一下叫change message。那请问一下,我是不是要补一下这个方法呀。那我是不是要在这个view对象里面去补一个。写一下啊,Method打括号。就这样子,然后它等于function。就这样的吧,加个逗号啊。
53:02
然后给它复个值z.message等于,本来我是等于行,我现在把它改成你好。就这样子。或者这样吧。这个值咱们用数字用一来表示。然后这个message等于this message加上一。啊,This点加一行吗?同学们每次把它值累加一嘛。哎,没问题吧,每次把它的值累加一行试试呗。Before update。咱们在这边写一下。从这到这,CTRLC。这个叫before update。稍等啊,我把这个把它改改对了啊,Mounted对应的marketed before对的啊,Before updateed对的,好,这叫数据更新之前。数据更新之前。Message document.get element by ID sp.in text,我把另外一个职业打印出来。点log。
54:06
好,就这样子。行,没问题啊。再来,咱们来看一下before update以及update之后。从这到这,CTRLCCTRLV。Updated。数据更新之后,数据更新之前是吧。好,Message以及他,咱们来试试。刷一下。现在是一。请问一下阿的方法有没有调用?掉了吗?没有吗?还没更改呢。没错吧,行,这是我们之前的数据,我把它清空掉行吧,同学们清空了啊,这样看得更清晰,我点了啊。更新之前的指数的一。更新之后的值是不是二。那你看一下数据update更新之前span是不是一啊?Message改过来了吗?人家message要加一吗?你对用方法message是不是会加一啊?加一之后变成二,变成二是不是表示message有更改啊?Message有更改是不是before update才会被触发呀?
55:15
哎,触发之后咱们span之前还是一,阿里是不是更新之后啊,更新之后SPA是不是变成二。你再点说不变成二和三啊。哎,没错吧,再来是不是就变成三和四啊?行吧,同学们啊,OK,这个应该很好理解啊,好,这是咱们的这个叫生命周期。我们就可以在我们绑定的这几个方法里面对应的。在某某某一个阶段,我们去执行我们想要去执行的一些动作。OK。好了,那整个的这个view的这个小知识点,咱们就把它说完了,应该还是蛮简单的吧,同学们。这个练习我先说一下,这个练习咱们不做啊,因为这个练习咱们做的是静态的,咱们这个做练习的时候,我们就直接把它和后面的X把它把它这个整合起来直接做了啊,就是数据这边咱们数据是假的啊,是是假数据,咱们就直接从数做真数据,从数据库去查好不好。
56:08
下面的时间请大家把这些把它去练习一下啊。
我来说两句