首页 > 代码库 > AnjularJS系列3 —— 数据的双向绑定

AnjularJS系列3 —— 数据的双向绑定

2024-08-29 11:39:02   216人阅读

第三篇，双向的数据绑定

数据绑定是AnguarJS的特性之一，避免书写大量的初始代码从而节约开发时间

我们想象一下Model是你的应用中的简单事实。

你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。

传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。

一方面，model变化驱动了DOM中元素变化，

另一方面，DOM元素的变化也会影响到Model。

这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。

这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。

这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。

这段是网上百度的知识理论，现在，我对于所谓MV的概念并不太清晰，以下为我结合之前写JS的经验得出的心得：

      AngularJS可将一个变量或属性（Model）的值通过{{}}的形式绑定到页面的控件上，而不需要自行写js对DOM进行操作，减少代码量

      (更新View指的是什么？)

以下是双向绑定的示例：

技术分享 
 1 <body ng-app="">
 2     <DIV>
 3         <div>
 4             <label>Name:</label>
 5             <input type="text" ng-model="name"  placeholder="请输入姓名" name="">
 6         </div>
 7         <div>
 8             <label>问候语：</label>
 9             <label>Hello,{{name}}</label>
10         </div>
11     </DIV>
12 </body>
View Code

 原生js需要对DOM进行操作：

技术分享 
 1 <body>
 2     <div>
 3         <label>Name:</label>
 4         <input type="text" id="name"  placeholder="请输入姓名" onkeyup ="namechange();" name="">
 5     </div>
 6     <div>
 7         <label>问候语：</label>
 8         <label id="greeting"></label>
 9     </div>
10 </body>
11 <script type="text/javascript"> 
12     function namechange()
13     {
14         var name=document.getElementById(‘name‘).value;
15         document.getElementById(‘greeting‘).innerText="Hello,"+name;
16     }
17 
18 </script>
View Code

 

AnjularJS系列3 —— 数据的双向绑定


联系
我们