05. 尚硅谷_AngularJS_双向数据绑定.avi原创

来接着我们上节课来讲，上节课呢，我们在安拉JS入门这一块啊，我们学了一个叫指令的东西，还有两个大括号，这叫表达式，先说一下大家怎么去写它。一般来说，我们这个都有一个自动提示或者智能提示的功能，这不是NGAPP吗？你连这个杠都不用输，直接输后边了啊，这是第一步，第二步，我看有的同学写这个，你们写这两个大括号怎么写啊。是这样吗？再移进去啊，不要这样就行啊，按住shift键连按两下，左边右边会自动帮你补齐。能懂吧，你咔咔那样写效率太低了。啊，这是我们基本的一些东西，那我到这儿为止，我问一下大家，咱们上节课实现这个功能。有没有去操作到。我有获取这个input，然后将它内容动态的塞给他吗？没有吧，没有啊，然后我们来看一下这个NG model啊，有的同学可能说在这不太理解这个是啥意思啊。

我NG的所在的输入框是不是这个input，然后这句话他说的是将当前输入框的值与谁关联，我再强调一遍，现在这个水其实就是代表的是谁啊。作用于对象啊，有的同学可能上来说跟作用对象没没有一点问题啊，他现在就是与跟作用于对象关联。通俗一点讲，NG model只是负责切线大小的，你比如说你打开这个，通过浏览器打开一个页面，那这我们能直观的看到这是不是对应的是页面啊，而你打开这个工具，这显示的东西告诉大家，相当于是安格拉GS的内存。按内存。这不是页面吗？那如何让页面和内存关联上呢？靠的就是我们刚刚那个指令叫。

NG model导他帮你去接线搭桥，连一根线诶。一旦连上了以后，那么我在页面上输入数据，它会自动的干嘛流到内存里面。就自动的流过去，相当于是铺了一个管道。那现在我们再来感受一下，我CT一个A。这边就有了吧，这边的数据是哪来的呢？就是从这边流过来的。我们再来看一个东西，下面这是不是用两个大括号又叫表达式啊，这个数据是哪来的？问一下大家是从哪个地方流过来的，是从上面这个input流过来的，还是从我的内存里面流过来？哎，内存里面是不是要知道，因为表达时要显示的数据，他是不是问他当前的作用对象里面指定的属性名要。

知道了这点来，那我们接下来要轻松一点。来这节课呢，我们来看，哎，四个重要概念里面第一个。双向数据绑定我呢，先把这个打开啊，打开来我们先来看一些概念。学双向数据绑定前，你得先理解一个概念，叫数据绑定。什么叫数据绑定呢？也简单。数据从一个地方A转移或者传递到另一个地方，数据另一个地方B。而这个操作由框架来完成，这个现在的框架说的就是安拉GS。说白了，数据从A流向B，我们现在的A就好比就是液面。而B呢，对应的就是内存。一旦说数据能从页面自动流向内存，那么它就实现了一个叫双向数据，叫数据绑定的概念。

知道了数据绑定，我们来看一下双向数据绑定。数据可以从view流向挖到，哎，这两个东西大家应该是知道的。你们之前应该给大家提到过一个概念，叫MVC。在MVC里边，那V层是不是代表的就是咱们的view层。为用层，其实直观的来说指的是同层，更再简单一点就是说啊页面。那model是什么意思呢？这是不是写了模型啊？MVC里边它代表着M层，M层更简单一点，怎么说它代表的是哪一层？就是model层，本就是模型层吗？Model在那表示数据层。数据。哎，来。我连起来看一下这句话，数据可以从view流向model，也可以从model流向view。

那么这样的话，它就叫双向数据管理。说白了是在我的页面和内存这我数据是不是可以来回的往返，哎，这这以前我们刚开始说的，这叫单向，现在他能再掉头回来，这叫双向。哎，这叫双向，那视图模型这一块。重点我要讲到这儿，在视图这一块我们讲了它就是页面，而我们当前用安格拉GS的话，除了页面的话，我们更加关注的是它里面的指令还有什么表达式。模型这也给大家列出来了啊。是不是这个模型我刚说了数据层，而这个数据后边紧跟的是作用定向。我们打开这个工具，你上来第一个是不是能看到是这个对象啊，而我说了这个板块代表的是安哥拉GS的内存。

那个从最大的那个对象，其实就是他。到现在为止，我问一下大家对什么叫对象或者对象和函数的区别是什么？这个是很有可能，就面试的时候，敲门砖上来先问一个这个简单的和你聊一下，哎，什么是对象。好，对应项是个所有数据对吧，那什么是函数呢？其实你对你上来应该也说函数也是一个对象。对不对？函数也是一个对象，只不过它是一个特殊的对象，特殊在哪？它可以去执行调用。而我对象里面是不是可以包裹函数啊？哎，对象既然是存放数据的，管理数据的，它可以多个函数以及变量。

知道了这个以后，我们往下来，我还是把prepare这个写好了，打开让大家看一个效果，哎，这就是提前写好的一些好处啊。看这一把和我们上一把的区别。首先上来是不是有一个套嘛，好，这是我们能直观的看到有一个套吗？那接下来我在这儿比如说。我整一个亿。大家看这是一个文，一个输入框，对应一个文本，下面是不是又一个，但是我现在操作了个一。下面这三个是不是都变了，然后再来看一个效果。我在这收房。那我操作下面的输入框的时候。这三个是不是也变了？哎，我们先来看看这个直观的效果啊，然后我来刷新一下啊，重来。大家看它上了一个套嘛，我们给大家把这个工具点开。你看下。

这这不上来有一套嘛，这儿也有，那到这儿的话，大家分析一些事情。这个套现有的，还是这个套现有的。没关系，你可以猜一下。是页面的现有还是内存的现有？页面的是吗？同学，一旦说页面的话，那我input这上来有一个Tom说明什么，Input是不是有一个value属性，我通过VALUE6是不是可以设，但是有没有发现value设完了，你改不了了。这个知道不？那但是我这能不能改。可以吧？你看一下这个结构。我是不是有可能，如果说你们说页面先有，那么你肯定是这样的。对不对。如果说我设的value的话，你在那里面是动不了的，那现在我应付的文本框我是不是能去修改的。

那说明什么？说明其实是内图先有的。而我内存有了这个套了，页面也在显示，说明他是问我内存要的，流到这些地方的。这第一步，第二步，你看我初一，你现在除了他们三个变了，你还发现一个问题，这边变了没有。也变了，也是我内存这一块根据页面的数据的改变而发生了改变。那我问一下大家，他这个是平白无故变的吗？它是不是跟它是对应的，那现在有一个问题，就是我页面的数据是不是又留留给了他。肯定是流过去了，要不然他不会发生改变的。那我再问大家一个问题啊，我这个透明，首先我能确定它是不是能留到这儿。

然后下面这三个又变化了吧。这肯定是变了。现在问大家一个问题。我这三个的数据是他直接留过来的，还是说我先留给他，他变了以后再留给这三个呢？你们觉得哪个更靠谱一点？第二种，也就是说我上边这个TO1的数据是不是先留给这边，然后反向的再留给其他的那三个吧，那同理，我如果操作下面这个，大家说一下它这个数据是怎么留的。他是不是先给他，然后再给这三个吧。这没问题吧？为什么这样说？从上一节课我们能看到，在安GS里面，你根本没有直接去获取到某一个音input的。再往大了说，是没有获取到某一个盗你对象。那我们先来写一写，来这个是写好的，这个是我们的，先把静态的结构搭出来一个音步的，然后下边。

比如我就整个P标间吧，我们看一下它里面的文本到这儿。姓名一上节课我们是不是整个SPA呢？其实我告诉大家，我是SP，我都可以不不写。上来写子弹的，是怕你们理解不了。我表达式可以放在任何需要他的位置，那么这个地方现在是不是要显示一个员工的名字啊，输入的名字啊，那我就可以直接放一个表达式。然后我再复制一份。它是不是一共有俩，那现在我先把咱们这个静态页面打开，你看到的是这样的。现在有一个问题，这个表达式是不是直接显示出来了，这是你的语法，肯定是有地方出毛病了，为什么会显示出来了？对，有同学立马想到一个问题。

首先这个表达式现在是安拉GS的语法吧，解析不了的唯一原因是你安德拉没有发挥作用了，因为下面我安拉基是不是已经引入了。没有发挥作用是意味什么？你没有接管这一块区域？那我们现在要做的是来到八位标签，这里面要写一个东西。叫NGPP，这叫指令，现在它等于一个空串。所以我们通常就暂时来说，我们可以不用去写，就写个NGP。现在我就写了，他来，我再去刷新一下。大家看一下刚刚那个表达式是不是不在了，现在点开这个工具，你看一下。我为的是印证一句话，NGP这个指令，除了监管区域，它是不会自动生成一个。跟作用于对象，哎，这都是有连贯性的。

能懂吧，哎，它会自动生成，好了，现在我安接管了这块区域了，那接下来我们就要发挥作用了。下月这打字应该怎么写？我们可以先不用去关注他，上来人家是不是有个套吗？上来是不是有个套吗？来在这儿啊，我先把这些求关了。两个留着上来说有个套嘛，我们先不去管它，先把后边的实现了，就是我操作一个会影响其他三个怎么写啊。首先当我操作这两个任何一个时候，它是不是有数据，这个数据是不是先留给了内存啊，那我们应该是想办法让它和内存这一块是不是关联上。这没问题吧，怎么去关联呢？怎么给他牵线搭桥用的指令叫NG model。

然后在这个里面你随便去写。知道不？来吧，就you name。那它关联上了，叫u name，我们来看一把啊。刷新打开这个工具，现在下面是不是没有东西，刚刚是不是操作是他走你。当我这一输入，这是不是自动添加了元内部属性。好了，现在数据已经从这是不是流到这儿了。现在的问题是，我这三个还是空的呢。你是不是得想办法把这数据再反向的留回来？那留回来这一动作我们应该怎么去实现呢？往下来看。首先这两个表达式大家现在应该会写。表达式里边是不是要显示数据？问，指定属性名叫，你现在只有一个属性名叫UR name。

所以我这个里面放什么。是不放院里，那这个是一样的道理。能懂不来，我们先把这两个时间刷新。走，你看这两个。表达式什么出来了，关键是这个东西怎么写啊。这是不是还有个音符的啊，我先把这个文档关了，它没事。这里一部的应该怎么办？也用表达式吗？用表达还是指令，先确定这个事情。指令为什么不用表达式？你得知道，表达式的作用只是用来显示数据的，说白了，表达式是不能操作的。那你看一下页面，我问什么，这个地方你是可操作的吗。你想在这修改，你能修改吗？修改不了。

所以说我们在结合的下边这，我这是不是随时有可能去操作它，那这个时候应该是用一个指令，用哪个指令呢？一样的道理，N model。那么我里面应该写什么呢？是随便写吗？我先写个叉叉章，我们来看一下。来刷新一下，打开这我咔一操作上面这个音谱的，这是不是都个U属悉。那我操作下面这个呢。是不是就多叉叉叉属性啊，那这样的话，它和其他的三个就没有关系了，因为人家三个关联的是不是U内嘛，所以你这应该写什么。也得写U2内。那这是最终的效果，我们来看刷新走你。

这三个是不是都有了？打开这个工具这边也有了。然后我再去操作下面这个数个二。其他三个设备也变了，哎，那这样的话，数据就是来回的流动。然后我们再去完善一下，你看人家这个写好了，上来是不是有个套。这是有他。那说明他上来这儿就有数据了。意味着我肯定在初始化或数据。初始化数据，我们再去提出一个指令，叫NG，这个单词知道什么意思吧。就初始化的意思来NG的这个指令看它的作用，用来初始化当前作用域的变量。我们当前的作用什么跟作用。这不NGAPP吗？你用的话在它的后面NG就行了。

我现在要初始化什么数据呢？我想让我页面上来就显示一个数据，大家说我应该初始化哪个变量。咱们还能用这个内吗。能不能用这个name，还是用我的UR。这应该不用说。一内蒙，比如说来一个，哎，我这能用双双引号不。如果用双引号的话，有什么问题，他是不是欠泡了？完了。科比。这没问题吧，来看一眼。我去刷新一下啊。有没有发现这出来了，出来了，打开工具你会发现它这上来是不是就有个UR name对应的科比。哎，也就NG的作用是为当前的作用于对象去初始化数据。

知道了这些以后，来我们来看一个图。图虽然说有点乱，但是也好理解，中间是一个分水岭。我们先来看左边。左边是上来，我没有去操作过的时候。上海是不是有个套吗？这没问题吧，上来有一套，那我们都做了哪些操作呢？我们来分析一下，上来咱们是不是写了个NGP这个指令啊。这个不用管了，他是监管区域的。接下来我又写了一个叫NG的东西，注意啊，我NG的写在哪包标签吧，那我的数据最终是不是生成在？Co这个对象里面。然后当我这有了套以后，我页面这用了个nt model，它取下的，我们就来看这个组，这是不是对应的都是内啊。

这儿也是内蒙，这儿也是内蒙，这儿也是内蒙。现在我们来说一下这个数据流向，NG上来你显示是body，那你是HTML结构。说白了N我是不是写写在的是页面这个位置啊。但是他最终的数据存放在哪了？是在页面还是内存？是不是在这儿？哦，这是第一条。上来NGE的数据流到这儿了。那当我内存这有了内部属性对应是top的时候，如果是页面有跟我关联的叫内的，我的数据是不是自动的又流回到页面了？这就数据流向。现在我们需要分析的东西。是数据的流向双向还是单向？就是说数据绑定。我们刚刚不是学了一个概念叫数据绑定，接下来又讲了一个叫双向数据绑定嘛，现在问一下大NG的这个指令数据绑定它是单向还是双向。

想一下单向是双向。其实你通常看到这种应该能理解。单向。如何证明他是单枪呢？啊，有的同学可能想到我NG一点上来，这肯定是初始化数据，是不是在这，如果说它是商双向的话，大家看啊。我这现在是不是变了，如果说下什么意思啊，我能反向是不是留给留给那个谁N基塔。那如果说NG能变化的话，我再刷新。他应该是用我最亲的那个是。能懂吧，说白了，你反向影响不了我。

这第一个知道了它是单向，以后我们要确定它是从哪流到哪。这边是页面，这边是内存。内存就是我们打开这个版号，你要确定NG是从哪流到哪。就数据流向。没事儿啊，你们怎么想怎么说？从哪儿就到哪儿。其实我刚才提醒过他从哪流到哪，你要看他在哪写。在哪写在body标签吧，那八那些对应的不就是HTML结构吗？那说白了，他是在view在页面写的。但是我最终的数据生成在哪？内存里面。那数据流向从哪到哪。

不就是从V到M吗？从页面流向的内存。哎，我们上来NG是在这儿有包对标签。最终数据是不是生成在这儿，那不就是流过去的吗？接下来除了NG，我们用到了NG model。N级豌豆，我是不是在这儿写了一次？在这儿写了一次。我先问一下大家，上来这显示一个科比，这个数据是哪来的？从哪你就到哪。是不是从这边扭过来，这是很自然的一个事情。最起码NG model这个指令支持从model流向V采纳，这是一个方向的数据流动。那接下来我操作一下它所在的这个指令，所在的这个音，我整个一。

现在我页面上的数据是不是发生了变化？我问什么？内存变了没有？那现在这个数据是哪来的？很明显是我页面上给他了吧。那也就是说NG妈到这个指令是不是还支持从V流向哪？Model。刚刚什么到刘翔朋友，现在你能说明一个事情，我们NG model这个指令，他在数据绑定这一块可以实现的是双向数据绑定。两个方向，而刚刚的NG呢？叫单向数据绑定，他的数据流向是view，流向model。那除了这两个，我们还学了一个叫表达式的东西。我都表达式写字了。这很直观的，是不是在页面啊。

而它里面显示出来的数据是从哪要的？是不是从内存到哪，那说明表达时的数据流向是从哪流到哪。Model留下。能懂吗？我问一下他能不能从利用再反向留给王总？表达式。能不能就看表达式能不能操作，他都没有去改变数据的机会，他怎么可能留给他呢？表达时只是一味的索取。说白了，人家有什么，你是不是？问人家去要的啊，它只有这种权限，这叫双向数据绑定，双向数据绑定这个概念在啊安还有view里面应用的特别广泛啊，这个需要大家去知道。到这儿大家感觉哪个地方有疑惑可以提出来。

还是说你们自己先敲一下，改正一下。