Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定的示例代碼
簡介
使用插值表達(dá)式將一個表達(dá)式的值顯示在模版上
<img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1>
使用方括號將HTML標(biāo)簽的一個屬性值綁定到一個表達(dá)式上
<img [src]="imgUrl" alt="">
使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上
<button (click)="onClickButton($event)">按鈕綁定事件</button>
注意
在開始下面的例子之前,請先確認(rèn)已經(jīng)新建了一個工程。如果沒有,請查看:Angular2學(xué)習(xí)筆記之Angular CLI 安裝和使用教程
事件綁定
準(zhǔn)備工作
了解目的:在模版的界面上面增加一個按鈕,然后通過小括號綁定一個事件。
新建一個 bind 組件,使用命令: ng g c bind
修改 bind.component.html
<!-- 界面增加代碼 --> <button (click)="onClickButton($event)">按鈕綁定事件</button>
修改 bind.component.ts
//在 BindComponent 類方法中增加方法體 onClickButton(event: any){ console.log(event); }
修改 app.component.html
<!-- 增加 app-bind 組件 --> <app-bind></app-bind>
圖示:
Dom屬性綁定
例子一
插值表達(dá)式 與 屬性綁定 之間的關(guān)系
兩種方式都可以實現(xiàn),angular 在實現(xiàn)的邏輯上面是: 在程序加載組件的時候,會先將 "插值表達(dá)式" 翻譯為 "屬性綁定"
修改 bind.component.html
<!-- 界面增加代碼 --> <!-- 屬性綁定 --> <img [src]="imgUrl" alt=""> <!-- 插值表達(dá)式綁定 --> <img src="{{imgUrl}}" alt="">
修改 bind.component.ts
//增加變量 imgUrl: string = http://placehold.it/320x280;
圖示:
例子二
dom 屬性 與 html 屬性的區(qū)別
HTML元素的 DOM屬性和 HTML 屬性是有部分區(qū)別的,這點需要明確差異。
修改 bind.component.html
<!-- 增加代碼 --> <div> <input type="text" value="Tom" (input)="onInputEvent($event)"> </div>
修改 bind.component.ts
//增加 event事件 onInputEvent(event: any){ //獲取的是 dom 屬性,即輸入屬性 console.log(event.target.value); //獲取的是 html 屬性,也就是初始化的屬性 console.log(event.target.getAttribute("value")); }
圖示:
總結(jié):
1.少量的 HTML屬性和 DOM屬性之間有這 1 :1 的映射關(guān)系,如 :id
2.有些有 HTML屬性,沒有DOM 屬性, 如:colspan
3.有些有 DOM屬性,沒有HTML 屬性,如:textContent
4.就算名字一樣,DOM屬性和HTML屬性獲取的內(nèi)容可能不一樣
5.模版綁定是通過DOM屬性綁定的,而不是通過HTML屬性
6.HTML屬性指定了初始值,DOM屬性表示當(dāng)前值;DOM屬性的值可以改變,HTML的值不能改變
例子部分完整代碼
bind.component.html
<p> bind works! </p> <button (click)="onClickButton($event)">按鈕綁定事件</button> <div> <!-- 屬性綁定 --> <img [src]="imgUrl" alt=""> <!-- 插值表達(dá)式綁定 --> <img src="{{imgUrl}}" alt=""> </div> <div> <input type="text" value="Tom" (input)="onInputEvent($event)"> </div>
bind.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-bind', templateUrl: './bind.component.html', styleUrls: ['./bind.component.css'] }) export class BindComponent implements OnInit { imgUrl: string = "http://placehold.it/320x280"; constructor() { } ngOnInit() { } onClickButton(event: any){ console.log(event); } onInputEvent(event: any){ //獲取的是 dom 屬性,即輸入屬性 console.log(event.target.value); //獲取的是 html 屬性,也就是初始化的屬性 console.log(event.target.getAttribute("value")); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AnjularJS中$scope和$rootScope的區(qū)別小結(jié)
這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別,文中運用實例代碼介紹的很詳細(xì),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09angularjs下ng-repeat點擊元素改變樣式的實現(xiàn)方法
今天小編就為大家分享一篇angularjs下ng-repeat點擊元素改變樣式的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下2015-07-07AngularJS基礎(chǔ) ng-src 指令簡單示例
本文主要介紹AngularJS ng-src 指令,這里對ng-src 指令的資料做了詳細(xì)整理,有需要的小伙伴可以參考下2016-08-08簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對自定義工廠和服務(wù)的創(chuàng)建來講,需要的朋友可以參考下2015-06-06