angular2.0数据绑定语法

Data direction	Syntax	Binding type
One-way from data source to view target	COPY CODE {{expression}} [target] = "expression" bind-target = "expression"	Interpolation Property Attribute Class Style
One-way from view target to data source	COPY CODE (target) = "statement" on-target = "statement"	Event
Two-way	COPY CODE [(target)] = "expression" bindon-target = "expression"	Two-way

例子：

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>

Binding targets

The target of a data binding is something in the DOM. Depending on the binding type, the target can be an (element | component | directive) property, an (element | component | directive) event, or (rarely) an attribute name. The following table summarizes:

Binding type	Target	Examples
Property	Element property Component property Directive property	COPY CODE <img [src] = "heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass] = "{selected: isSelected}"></div>
Event	Element event Component event Directive event	COPY CODE <button (click) = "onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event">click me</div>
Two-way	Event and property	COPY CODE <input [(ngModel)]="heroName">
Attribute	Attribute (the exception)	COPY CODE <button [attr.aria-label]="help">help</button>
Class	class property	COPY CODE <div [class.special]="isSpecial">Special</div>
Style	style property	COPY CODE <button [style.color] = "isSpecial ? 'red' : 'green'">

Let’s descend from the architectural clouds and look at each of these binding types in concrete detail.