【Angular学习】单向数据绑定--属性/事件/差值

前言

Angular JS时默认双向绑定，Angular2之后进行彻底的变革，默认为单向绑定，为什么要变革呢？

绑定方式

单向绑定：

当我们使用jquery库改变模板上绑定对象的值时，控制器中的属性值不会改变。

双向绑定：

与单向绑定相反，两者要保持同步

实现方式

双向绑定的实现：

angularJS 在页面上存有一个维护所有绑定表达式的列表，当一个浏览器事件发生时会反复检查列表，直到确认所有的绑定对象模板和控制器都已同步，所以处理复杂页面时候非常耗费性能 。

单向绑定的实现：

angular 2之后默认单向绑定的实现主要有三种方式：事件绑定，属性绑定，差值绑定。其中属性绑定和差值绑定是一个东西，只是模板上写法不同。

Demo

事件绑定

事件绑定的样式是小括号
首先在模板里面写上要触发的事件

<p>
  <!-- 事件绑定 -->
 <button (click)="saveClick($event)">事件绑定点我</button>
</p>

然后再控制器中绑定事件

saveClick(event:any){
  // console.log("模板触发事件了");
    alert("模板触发事件了");
  }

效果

属性绑定和差值绑定

属性绑定的样式是中括号[]，差值绑定是两个嵌套的大括号{{}}
首先在控制器中声明要绑定的对象，

aa:string="显示属性绑定的值";

然后在模板中使用对象

<!-- 属性绑定 --> <input [value]="aa"/> <!-- 差值绑定 --> <h3>{{aa}}</h3>

效果

这里也可以看出了属性绑定和差值绑定是一回事，只需要在控制器里声明了对象属性，模板里面可以进行两种形式的绑定。

总结

单向绑定先分享到这里，下篇文章分享双向绑定。