Angular使用筆記6_Data Binding

 Angular當中提供的Data Binding

主要分為

內嵌繫結 Interpolation

{{statement}}

statement : 通常是來自component的屬性

使用兩個大括號的語法就稱為內嵌繫結，屬於單向的繫結，只有將元件中 component 的資料傳送到網頁元素 template 上顯示。

屬性繫結 Property Binding

[src]="statement"

[attr.data-xxx]="statement" (for data-attribute)

 

屬性使用中括號包住，並等於一個陳述式，使用引號包住，EX. [屬性]='陳述內容'。

雖然 property 與 attribute 的中文都翻譯成「屬性」

但就 HTML5 中，attribute 是可自定義的，例如： data-setAttributeName，可是

無法作為屬性繫結，在html中屬性是以 atrribute 稱呼，是指標籤的屬性。

例如:

<img title="pic title" src="https://url.joor.net/ckY" alt="pic" />

src、title、alt 為標籤屬性，另外還有很常見的 href、class…

在此是針對JavaScript DOM下的 property

事件繫結 Event Binding

HTML中所有的event都能轉為Angular的event

雙向繫結 Two-way Binding

語法

內嵌繫結 Interpolation

屬性繫結 Property Binding

事件繫結 Event Binding