亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Angular4學習筆記——數(shù)據(jù)綁定

MRZYD / 1499人閱讀

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

數(shù)據(jù)綁定總體而言有三種類型：

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

屬性綁定（包括property和attitude

事件綁定

插值表達式綁定

既可以寫在html結(jié)構(gòu)中，也可以寫在標簽中

My current hero is {{currentHero.name}}
屬性綁定：[屬性名] 
// 元素屬性設(shè)置為組件屬性的值,image 元素的src屬性會被綁定到組件的heroImageUrl屬性上

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

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

Attribute綁定

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

所以，在Angular的世界中，attribute唯一的作用是用來初始化元素和指令的狀態(tài)。 當進行數(shù)據(jù)綁定時，只是在與元素和指令的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

通過樣式綁定，可以設(shè)置內(nèi)聯(lián)樣式，樣式屬性命名方法可以用中線命名法，也可以用駝峰式命名法，如fontSize。


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

同樣也可以通過ngStyle指令把內(nèi)聯(lián)樣式綁定到一個對象上。

xxxx
事件綁定：(事件名)

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

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

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

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

// （子）組件定義了deleteRequest屬性，它是EventEmitter實例
deleteRequest = new EventEmitter();
// 當觸發(fā)delete事件時，指令調(diào)用EventEmitter.emit(payload)來觸發(fā)事件
delete() {
  this.deleteRequest.emit(this.hero);
}
// (父）組件監(jiān)聽到了deleteRequest事件就調(diào)用deleteHero方法，并通過$event對象來訪問載荷this.hero
雙向數(shù)據(jù)綁定： [(...)]

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90029.html

相關(guān)文章

  • Angular4學習筆記之HTML屬性綁定

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

    wawor4827 評論0 收藏0

  • Angular4學習筆記之DOM屬性綁定

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

    Genng 評論0 收藏0

  • Angular4學習筆記——組件之間的交互

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

    Guakin_Huang 評論0 收藏0

  • Angular4學習筆記——生命周期鉤子

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

    fizz 評論0 收藏0

  • angular4學習記錄 -- 數(shù)據(jù)綁定、響應(yīng)式編程、管道

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

    Alliot 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<