成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular4學(xué)習(xí)筆記——數(shù)據(jù)綁定

MRZYD / 1447人閱讀

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

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

{{...}} 插值表達(dá)式綁定

屬性綁定（包括property和attitude

事件綁定

插值表達(dá)式綁定

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

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

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

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

Attribute綁定

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

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

具體綁定格式如下：

 One-Two
Class綁定和Style綁定

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

// 替換型綁定：即當(dāng) badCurly 有值時(shí)class的值會被完全替換成一個(gè)badCurly.

Bad curly

// 增減類綁定：綁定到特定的類名

The class binding is special

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

xxxx

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


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

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

xxxx
事件綁定：(事件名)

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)文章

  • Angular4學(xué)習(xí)筆記之HTML屬性綁定

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

    wawor4827 評論0 收藏0

  • Angular4學(xué)習(xí)筆記之DOM屬性綁定

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

    Genng 評論0 收藏0

  • Angular4學(xué)習(xí)筆記——組件之間的交互

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

    Guakin_Huang 評論0 收藏0

  • Angular4學(xué)習(xí)筆記——生命周期鉤子

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

    fizz 評論0 收藏0

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

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

    Alliot 評論0 收藏0

發(fā)表評論

0條評論

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