Angular学习(一)：模板与数据绑定

HTML 是 Angular 模板的语言。这一节学习如何通过数据绑定来动态设置 DOM（文档对象模型）的值。

一、绑定语法

绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向	语法	绑定类型
单向(从视图到数据源)	{{ }}、 [target]="expression"、bind-target="expression"	插值、（属性、样式、CSS类、Attribute）
单向(从数据源到视图)	(target)="statement"、on-target="statement"	事件
双向绑定	[(target)]="expression"、bindon-target="expression"	双向

二、绑定目标

插播：property属性值可以是各种类型的，attribute属性值只能够是字符串。

绑定类型	目标
属性	元素的 property、组件的 property、指令的 property
Attribute(极少数情况下)	attribute（例外情况）
CSS 类	class property
样式	style property
事件	元素的事件、组件的事件、指令的事件
双向	事件与 property

1、属性绑定示例

当要渲染的数据类型是字符串时，没有技术上的理由证明哪种形式更好。 但数据类型不是字符串时，就必须使用属性绑定了。

元素：<img [src]="heroImageUrl">
组件(父子组件之间通讯)：<app-hero-detail [hero]="currentHero">app-hero-detail>
指令：<div [ngClass]="{'special': isSpecial}">div>
复制代码

2、Attribute绑定示例

<button [attr.aria-label]="help">helpbutton>
复制代码

3、CSS 类绑定示例

<div [class.special]="isSpecial">Specialdiv>
复制代码

4、样式绑定示例

<button [style.color]="isSpecial ? 'red' : 'green'">
复制代码

5、事件绑定示例

元素：<button (click)="onSave()">Savebutton>
组件(父子组件之间通讯)：<app-hero-detail (deleteRequest)="deleteHero()">app-hero-detail>
指令：<div (myClick)="clicked=$event" clickable>click mediv>
复制代码

6、双向绑定

<input [(ngModel)]="name">
复制代码

转载于:https://juejin.im/post/5cd386da6fb9a0323f68b84e