Angular4學習筆記——數據綁定

MRZYD 發布于2019-08-21 17:48 / 1437人閱讀

摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態。當進行數據綁定時，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。

數據綁定總體而言有三種類型：

{{...}} 插值表達式綁定

屬性綁定（包括property和attitude

事件綁定

插值表達式綁定

既可以寫在html結構中，也可以寫在標簽中

My current hero is {{currentHero.name}}

屬性綁定：[屬性名]

// 元素屬性設置為組件屬性的值,image 元素的src屬性會被綁定到組件的heroImageUrl屬性上

// 設定自定義組件的模型屬性（這是父子組件之間通訊的重要途徑）

注意別忘了[]，忘記了[]，則相應屬性就被綁定到了字符串上，而不是背后所代表的值。
有時候也可以通過插值表達式實現一樣的效果

Attribute綁定

當元素沒有屬性（native property)可綁的時候，就必須使用 attribute 綁定，例如元素沒有colspan屬性,但是插值表達式和屬性綁定只能設置屬性，不能設置 attribute，這時我們便需要使用到attribute綁定來替我們解決這個問題。
如果對property和attribute有所疑惑，可通過下面的文字先做一個區分梳理：
attribute初始化DOM property，然后它們的任務就完成了，property的值可以改變；attribute 的值不能改變。
例如，當瀏覽器渲染時，它將創建相應DOM 節點，其value property被初始化為“abc”。當用戶在輸入框中輸入“abcwwww”時，DOM元素的value property變成了“abcwwww”。但是這個HTML value attribute保持不變。如果我們讀input元素的attribute，就會發現確實沒變：input.getAttribute("value") // 返回 "abc"。

所以，在Angular的世界中，attribute唯一的作用是用來初始化元素和指令的狀態。當進行數據綁定時，只是在與元素和指令的property和事件打交道，而attribute就基本上靠邊站了，只有比較特殊的情況才會用到他。

具體綁定格式如下：

 One-Two

Class綁定和Style綁定

借助 CSS 類綁定，可以從元素的class attribute 上添加和移除 CSS 類名。

// 替換型綁定：即當 badCurly 有值時class的值會被完全替換成一個badCurly.
Bad curly
// 增減類綁定：綁定到特定的類名
The class binding is special

如果要同時替換多個class，使用ngClass指令綁定到一個對象上是更好的選擇：通過修改currentClasses的值可以同時修改1/n個class.

xxxx

通過樣式綁定，可以設置內聯樣式，樣式屬性命名方法可以用中線命名法，也可以用駝峰式命名法，如fontSize。


// 單位也寫在方括號里，這個很方便啊

同樣也可以通過ngStyle指令把內聯樣式綁定到一個對象上。

xxxx

事件綁定：(事件名)

事件綁定分為對原生DOM事件綁定和自定義事件綁定。原生事件可以通過$event訪問事件對象，它有像target和target.value這樣的屬性。

// 事件綁定監聽按鈕的點擊事件。每當點擊發生時，都會調用組件的onSave()方法。

// 當input值發生改變時，自動更新currentHero.name的值

自定義事件和Vue的處理方法很相像。

// （子）組件定義了deleteRequest屬性，它是EventEmitter實例
deleteRequest = new EventEmitter();
// 當觸發delete事件時，指令調用EventEmitter.emit(payload)來觸發事件
delete() {
  this.deleteRequest.emit(this.hero);
}
// (父）組件監聽到了deleteRequest事件就調用deleteHero方法，并通過$event對象來訪問載荷this.hero

雙向數據綁定： [(...)]

雙向綁定實質上是屬性綁定和事件綁定的語法糖。

// 在沒有雙向綁定之前可能需要這樣寫

// 但有了雙向綁定之后，只需要這樣就行了

父子組件之間可以通過EventEmitter來進行操作，原生html元素就需要依賴自身的值變化事件了，但即使可以操作這樣寫也不夠優雅，所幸我們可以通過[(ngModel)]指令來完成。值得注意的是，這種指令也只是針對表單元素，對于組件還是需要使用前文提及的雙向綁定語法。
還有一點是，表單元素使用過程會需要一些注意的地方，還請查看表單相關文檔/稍后寫的文章，下面代碼僅作為語法示例。

文章先寫到這吧，還有一些其他的工具和數據綁定關系不算特別大就放在其他筆記中啦~~

前端新人，寫的不對的地方還請指出；如果覺得對你有幫助，可以點個贊鼓勵一下我哦！~~

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90029.html

Angular4學習筆記之HTML屬性綁定

摘要：第二種情況控制樣式如果的值為那么樣式就是，否則就是寫在最后對于的屬性綁定和的屬性綁定是一樣一樣的。對于文章中所用的代碼是結合了學習筆記之數據綁定上面的例子做的，鏈接地址簡介基本HTML屬性 Css 類綁定 CSS 類綁定，[class] 全部替換的例子 CSS 類綁定，[class.sepcial] 部分替換的例子 CSS 類綁定，[ngClass] 替換多個的...

wawor4827 2019-08-21 18:36 評論0 收藏0
Angular4學習筆記之DOM屬性綁定

摘要：如果沒有，請查看學習筆記之安裝和使用教程事件綁定準備工作了解目的在模版的界面上面增加一個按鈕，然后通過小括號綁定一個事件。簡介使用插值表達式將一個表達式的值顯示在模版上 {{productTitle}} 使用方括號將HTML標簽的一個屬性值綁定到一個表達式上使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上按鈕綁定事件注意在開始下面的例子之前，請先確認已...

Genng 2019-08-21 18:34 評論0 收藏0
Angular4學習筆記——組件之間的交互

摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。通過輸入型綁定把數據從父組件傳到子組件 Angular對于父組件 => 子組件的數據通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數據 i...

Guakin_Huang 2019-08-21 17:48 評論0 收藏0
Angular4學習筆記——生命周期鉤子

摘要：所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，會找到并調用像這樣的鉤子方法，有沒有接口無所謂。當使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法用處當設置數據綁定輸入屬性發生變化時響應。接口和鉤子在介紹生命周期的相關概念之前，可以先復習一下TypeScript對于接口的概念。在這里主要使用的是類接口及其實現： interf...

fizz 2019-08-21 17:48 評論0 收藏0
angular4學習記錄 -- 數據綁定、響應式編程、管道

摘要：我們通過裝飾器告訴這是一個管道。這個裝飾器允許我們定義管道的名字，這個名字會被用在模板表達式中。非純管道速度超慢，深度檢測，會頻繁檢測。 angular4 數據綁定、響應式編程、管道數據綁定基本Html屬性綁定 Something css類綁定 something something something 樣式綁定

Alliot 2019-08-21 16:45 評論0 收藏0