00:00
来接着我们上节课来讲,上节课呢,我们在安拉JS入门这一块啊,我们学了一个叫指令的东西,还有两个大括号,这叫表达式,先说一下大家怎么去写它。一般来说,我们这个都有一个自动提示或者智能提示的功能,这不是NGAPP吗?你连这个杠都不用输,直接输后边了啊,这是第一步,第二步,我看有的同学写这个,你们写这两个大括号怎么写啊。是这样吗?再移进去啊,不要这样就行啊,按住shift键连按两下,左边右边会自动帮你补齐。能懂吧,你咔咔那样写效率太低了。啊,这是我们基本的一些东西,那我到这儿为止,我问一下大家,咱们上节课实现这个功能。有没有去操作到。我有获取这个input,然后将它内容动态的塞给他吗?没有吧,没有啊,然后我们来看一下这个NG model啊,有的同学可能说在这不太理解这个是啥意思啊。
01:10
我NG的所在的输入框是不是这个input,然后这句话他说的是将当前输入框的值与谁关联,我再强调一遍,现在这个水其实就是代表的是谁啊。作用于对象啊,有的同学可能上来说跟作用对象没没有一点问题啊,他现在就是与跟作用于对象关联。通俗一点讲,NG model只是负责切线大小的,你比如说你打开这个,通过浏览器打开一个页面,那这我们能直观的看到这是不是对应的是页面啊,而你打开这个工具,这显示的东西告诉大家,相当于是安格拉GS的内存。按内存。这不是页面吗?那如何让页面和内存关联上呢?靠的就是我们刚刚那个指令叫。
02:06
NG model导他帮你去接线搭桥,连一根线诶。一旦连上了以后,那么我在页面上输入数据,它会自动的干嘛流到内存里面。就自动的流过去,相当于是铺了一个管道。那现在我们再来感受一下,我CT一个A。这边就有了吧,这边的数据是哪来的呢?就是从这边流过来的。我们再来看一个东西,下面这是不是用两个大括号又叫表达式啊,这个数据是哪来的?问一下大家是从哪个地方流过来的,是从上面这个input流过来的,还是从我的内存里面流过来?哎,内存里面是不是要知道,因为表达时要显示的数据,他是不是问他当前的作用对象里面指定的属性名要。
03:04
知道了这点来,那我们接下来要轻松一点。来这节课呢,我们来看,哎,四个重要概念里面第一个。双向数据绑定我呢,先把这个打开啊,打开来我们先来看一些概念。学双向数据绑定前,你得先理解一个概念,叫数据绑定。什么叫数据绑定呢?也简单。数据从一个地方A转移或者传递到另一个地方,数据另一个地方B。而这个操作由框架来完成,这个现在的框架说的就是安拉GS。说白了,数据从A流向B,我们现在的A就好比就是液面。而B呢,对应的就是内存。一旦说数据能从页面自动流向内存,那么它就实现了一个叫双向数据,叫数据绑定的概念。
04:03
知道了数据绑定,我们来看一下双向数据绑定。数据可以从view流向挖到,哎,这两个东西大家应该是知道的。你们之前应该给大家提到过一个概念,叫MVC。在MVC里边,那V层是不是代表的就是咱们的view层。为用层,其实直观的来说指的是同层,更再简单一点就是说啊页面。那model是什么意思呢?这是不是写了模型啊?MVC里边它代表着M层,M层更简单一点,怎么说它代表的是哪一层?就是model层,本就是模型层吗?Model在那表示数据层。数据。哎,来。我连起来看一下这句话,数据可以从view流向model,也可以从model流向view。
05:04
那么这样的话,它就叫双向数据管理。说白了是在我的页面和内存这我数据是不是可以来回的往返,哎,这这以前我们刚开始说的,这叫单向,现在他能再掉头回来,这叫双向。哎,这叫双向,那视图模型这一块。重点我要讲到这儿,在视图这一块我们讲了它就是页面,而我们当前用安格拉GS的话,除了页面的话,我们更加关注的是它里面的指令还有什么表达式。模型这也给大家列出来了啊。是不是这个模型我刚说了数据层,而这个数据后边紧跟的是作用定向。我们打开这个工具,你上来第一个是不是能看到是这个对象啊,而我说了这个板块代表的是安哥拉GS的内存。
06:02
那个从最大的那个对象,其实就是他。到现在为止,我问一下大家对什么叫对象或者对象和函数的区别是什么?这个是很有可能,就面试的时候,敲门砖上来先问一个这个简单的和你聊一下,哎,什么是对象。好,对应项是个所有数据对吧,那什么是函数呢?其实你对你上来应该也说函数也是一个对象。对不对?函数也是一个对象,只不过它是一个特殊的对象,特殊在哪?它可以去执行调用。而我对象里面是不是可以包裹函数啊?哎,对象既然是存放数据的,管理数据的,它可以多个函数以及变量。
07:00
知道了这个以后,我们往下来,我还是把prepare这个写好了,打开让大家看一个效果,哎,这就是提前写好的一些好处啊。看这一把和我们上一把的区别。首先上来是不是有一个套嘛,好,这是我们能直观的看到有一个套吗?那接下来我在这儿比如说。我整一个亿。大家看这是一个文,一个输入框,对应一个文本,下面是不是又一个,但是我现在操作了个一。下面这三个是不是都变了,然后再来看一个效果。我在这收房。那我操作下面的输入框的时候。这三个是不是也变了?哎,我们先来看看这个直观的效果啊,然后我来刷新一下啊,重来。大家看它上了一个套嘛,我们给大家把这个工具点开。你看下。
08:01
这这不上来有一套嘛,这儿也有,那到这儿的话,大家分析一些事情。这个套现有的,还是这个套现有的。没关系,你可以猜一下。是页面的现有还是内存的现有?页面的是吗?同学,一旦说页面的话,那我input这上来有一个Tom说明什么,Input是不是有一个value属性,我通过VALUE6是不是可以设,但是有没有发现value设完了,你改不了了。这个知道不?那但是我这能不能改。可以吧?你看一下这个结构。我是不是有可能,如果说你们说页面先有,那么你肯定是这样的。对不对。如果说我设的value的话,你在那里面是动不了的,那现在我应付的文本框我是不是能去修改的。
09:07
那说明什么?说明其实是内图先有的。而我内存有了这个套了,页面也在显示,说明他是问我内存要的,流到这些地方的。这第一步,第二步,你看我初一,你现在除了他们三个变了,你还发现一个问题,这边变了没有。也变了,也是我内存这一块根据页面的数据的改变而发生了改变。那我问一下大家,他这个是平白无故变的吗?它是不是跟它是对应的,那现在有一个问题,就是我页面的数据是不是又留留给了他。肯定是流过去了,要不然他不会发生改变的。那我再问大家一个问题啊,我这个透明,首先我能确定它是不是能留到这儿。
10:01
然后下面这三个又变化了吧。这肯定是变了。现在问大家一个问题。我这三个的数据是他直接留过来的,还是说我先留给他,他变了以后再留给这三个呢?你们觉得哪个更靠谱一点?第二种,也就是说我上边这个TO1的数据是不是先留给这边,然后反向的再留给其他的那三个吧,那同理,我如果操作下面这个,大家说一下它这个数据是怎么留的。他是不是先给他,然后再给这三个吧。这没问题吧?为什么这样说?从上一节课我们能看到,在安GS里面,你根本没有直接去获取到某一个音input的。再往大了说,是没有获取到某一个盗你对象。那我们先来写一写,来这个是写好的,这个是我们的,先把静态的结构搭出来一个音步的,然后下边。
11:10
比如我就整个P标间吧,我们看一下它里面的文本到这儿。姓名一上节课我们是不是整个SPA呢?其实我告诉大家,我是SP,我都可以不不写。上来写子弹的,是怕你们理解不了。我表达式可以放在任何需要他的位置,那么这个地方现在是不是要显示一个员工的名字啊,输入的名字啊,那我就可以直接放一个表达式。然后我再复制一份。它是不是一共有俩,那现在我先把咱们这个静态页面打开,你看到的是这样的。现在有一个问题,这个表达式是不是直接显示出来了,这是你的语法,肯定是有地方出毛病了,为什么会显示出来了?对,有同学立马想到一个问题。
12:02
首先这个表达式现在是安拉GS的语法吧,解析不了的唯一原因是你安德拉没有发挥作用了,因为下面我安拉基是不是已经引入了。没有发挥作用是意味什么?你没有接管这一块区域?那我们现在要做的是来到八位标签,这里面要写一个东西。叫NGPP,这叫指令,现在它等于一个空串。所以我们通常就暂时来说,我们可以不用去写,就写个NGP。现在我就写了,他来,我再去刷新一下。大家看一下刚刚那个表达式是不是不在了,现在点开这个工具,你看一下。我为的是印证一句话,NGP这个指令,除了监管区域,它是不会自动生成一个。跟作用于对象,哎,这都是有连贯性的。
13:04
能懂吧,哎,它会自动生成,好了,现在我安接管了这块区域了,那接下来我们就要发挥作用了。下月这打字应该怎么写?我们可以先不用去关注他,上来人家是不是有个套吗?上来是不是有个套吗?来在这儿啊,我先把这些求关了。两个留着上来说有个套嘛,我们先不去管它,先把后边的实现了,就是我操作一个会影响其他三个怎么写啊。首先当我操作这两个任何一个时候,它是不是有数据,这个数据是不是先留给了内存啊,那我们应该是想办法让它和内存这一块是不是关联上。这没问题吧,怎么去关联呢?怎么给他牵线搭桥用的指令叫NG model。
14:02
然后在这个里面你随便去写。知道不?来吧,就you name。那它关联上了,叫u name,我们来看一把啊。刷新打开这个工具,现在下面是不是没有东西,刚刚是不是操作是他走你。当我这一输入,这是不是自动添加了元内部属性。好了,现在数据已经从这是不是流到这儿了。现在的问题是,我这三个还是空的呢。你是不是得想办法把这数据再反向的留回来?那留回来这一动作我们应该怎么去实现呢?往下来看。首先这两个表达式大家现在应该会写。表达式里边是不是要显示数据?问,指定属性名叫,你现在只有一个属性名叫UR name。
15:00
所以我这个里面放什么。是不放院里,那这个是一样的道理。能懂不来,我们先把这两个时间刷新。走,你看这两个。表达式什么出来了,关键是这个东西怎么写啊。这是不是还有个音符的啊,我先把这个文档关了,它没事。这里一部的应该怎么办?也用表达式吗?用表达还是指令,先确定这个事情。指令为什么不用表达式?你得知道,表达式的作用只是用来显示数据的,说白了,表达式是不能操作的。那你看一下页面,我问什么,这个地方你是可操作的吗。你想在这修改,你能修改吗?修改不了。
16:00
所以说我们在结合的下边这,我这是不是随时有可能去操作它,那这个时候应该是用一个指令,用哪个指令呢?一样的道理,N model。那么我里面应该写什么呢?是随便写吗?我先写个叉叉章,我们来看一下。来刷新一下,打开这我咔一操作上面这个音谱的,这是不是都个U属悉。那我操作下面这个呢。是不是就多叉叉叉属性啊,那这样的话,它和其他的三个就没有关系了,因为人家三个关联的是不是U内嘛,所以你这应该写什么。也得写U2内。那这是最终的效果,我们来看刷新走你。
17:00
这三个是不是都有了?打开这个工具这边也有了。然后我再去操作下面这个数个二。其他三个设备也变了,哎,那这样的话,数据就是来回的流动。然后我们再去完善一下,你看人家这个写好了,上来是不是有个套。这是有他。那说明他上来这儿就有数据了。意味着我肯定在初始化或数据。初始化数据,我们再去提出一个指令,叫NG,这个单词知道什么意思吧。就初始化的意思来NG的这个指令看它的作用,用来初始化当前作用域的变量。我们当前的作用什么跟作用。这不NGAPP吗?你用的话在它的后面NG就行了。
18:00
我现在要初始化什么数据呢?我想让我页面上来就显示一个数据,大家说我应该初始化哪个变量。咱们还能用这个内吗。能不能用这个name,还是用我的UR。这应该不用说。一内蒙,比如说来一个,哎,我这能用双双引号不。如果用双引号的话,有什么问题,他是不是欠泡了?完了。科比。这没问题吧,来看一眼。我去刷新一下啊。有没有发现这出来了,出来了,打开工具你会发现它这上来是不是就有个UR name对应的科比。哎,也就NG的作用是为当前的作用于对象去初始化数据。
19:03
知道了这些以后,来我们来看一个图。图虽然说有点乱,但是也好理解,中间是一个分水岭。我们先来看左边。左边是上来,我没有去操作过的时候。上海是不是有个套吗?这没问题吧,上来有一套,那我们都做了哪些操作呢?我们来分析一下,上来咱们是不是写了个NGP这个指令啊。这个不用管了,他是监管区域的。接下来我又写了一个叫NG的东西,注意啊,我NG的写在哪包标签吧,那我的数据最终是不是生成在?Co这个对象里面。然后当我这有了套以后,我页面这用了个nt model,它取下的,我们就来看这个组,这是不是对应的都是内啊。
20:04
这儿也是内蒙,这儿也是内蒙,这儿也是内蒙。现在我们来说一下这个数据流向,NG上来你显示是body,那你是HTML结构。说白了N我是不是写写在的是页面这个位置啊。但是他最终的数据存放在哪了?是在页面还是内存?是不是在这儿?哦,这是第一条。上来NGE的数据流到这儿了。那当我内存这有了内部属性对应是top的时候,如果是页面有跟我关联的叫内的,我的数据是不是自动的又流回到页面了?这就数据流向。现在我们需要分析的东西。是数据的流向双向还是单向?就是说数据绑定。我们刚刚不是学了一个概念叫数据绑定,接下来又讲了一个叫双向数据绑定嘛,现在问一下大NG的这个指令数据绑定它是单向还是双向。
21:16
想一下单向是双向。其实你通常看到这种应该能理解。单向。如何证明他是单枪呢?啊,有的同学可能想到我NG一点上来,这肯定是初始化数据,是不是在这,如果说它是商双向的话,大家看啊。我这现在是不是变了,如果说下什么意思啊,我能反向是不是留给留给那个谁N基塔。那如果说NG能变化的话,我再刷新。他应该是用我最亲的那个是。能懂吧,说白了,你反向影响不了我。
22:02
这第一个知道了它是单向,以后我们要确定它是从哪流到哪。这边是页面,这边是内存。内存就是我们打开这个版号,你要确定NG是从哪流到哪。就数据流向。没事儿啊,你们怎么想怎么说?从哪儿就到哪儿。其实我刚才提醒过他从哪流到哪,你要看他在哪写。在哪写在body标签吧,那八那些对应的不就是HTML结构吗?那说白了,他是在view在页面写的。但是我最终的数据生成在哪?内存里面。那数据流向从哪到哪。
23:01
不就是从V到M吗?从页面流向的内存。哎,我们上来NG是在这儿有包对标签。最终数据是不是生成在这儿,那不就是流过去的吗?接下来除了NG,我们用到了NG model。N级豌豆,我是不是在这儿写了一次?在这儿写了一次。我先问一下大家,上来这显示一个科比,这个数据是哪来的?从哪你就到哪。是不是从这边扭过来,这是很自然的一个事情。最起码NG model这个指令支持从model流向V采纳,这是一个方向的数据流动。那接下来我操作一下它所在的这个指令,所在的这个音,我整个一。
24:02
现在我页面上的数据是不是发生了变化?我问什么?内存变了没有?那现在这个数据是哪来的?很明显是我页面上给他了吧。那也就是说NG妈到这个指令是不是还支持从V流向哪?Model。刚刚什么到刘翔朋友,现在你能说明一个事情,我们NG model这个指令,他在数据绑定这一块可以实现的是双向数据绑定。两个方向,而刚刚的NG呢?叫单向数据绑定,他的数据流向是view,流向model。那除了这两个,我们还学了一个叫表达式的东西。我都表达式写字了。这很直观的,是不是在页面啊。
25:01
而它里面显示出来的数据是从哪要的?是不是从内存到哪,那说明表达时的数据流向是从哪流到哪。Model留下。能懂吗?我问一下他能不能从利用再反向留给王总?表达式。能不能就看表达式能不能操作,他都没有去改变数据的机会,他怎么可能留给他呢?表达时只是一味的索取。说白了,人家有什么,你是不是?问人家去要的啊,它只有这种权限,这叫双向数据绑定,双向数据绑定这个概念在啊安还有view里面应用的特别广泛啊,这个需要大家去知道。到这儿大家感觉哪个地方有疑惑可以提出来。
26:02
还是说你们自己先敲一下,改正一下。
我来说两句