前言 |
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>
效果
这里也可以看出了属性绑定和差值绑定是一回事,只需要在控制器里声明了对象属性,模板里面可以进行两种形式的绑定。
总结 |