angular2模版語法

https://angular.cn/docs/ts/latest/guide/template-syntax.html#!#html

模板中的HTML

HTML 是 Angular 模板的語言。幾乎所有的HTML語法都是有效的模板語法。 但值得注意的例外是<script>
元素,它被禁用了,以阻止腳本注入攻擊的風險。(實際上,<script>
只是被忽略了。) 參見安全頁了解詳情。
有些合法的 HTML 被用在模板中是沒有意義的。<html>
、<body>
和<base>
元素這個舞臺上中并沒有扮演有用的角色。剩下的所有元素基本上就都一樣用了。
可以通過組件和指令來擴展模板中的 HTML 詞匯。它們看上去就是新元素和屬性。接下來將學習如何通過數據綁定來動態獲取/設置 DOM(文檔對象模型)的值。
我們首先看看數據綁定的第一種形式 —— 插值表達式,它展示了模板的 HTML 可以有多豐富。

模板表達式

模板表達式產生一個值。 Angular 執行這個表達式,并把它賦值給綁定目標的屬性,這個綁定目標可能是 HTML 元素、組件或指令。
{{1 + 1}}
中所包含的模板表達式是1 + 1
。 在屬性綁定中會再次看到模板表達式,它出現在=
右側的引號中,看起來像這樣:[property]="expression"

編寫模板表達式所用的語言看起來很像 JavaScript。 很多 JavaScript 表達式也是合法的模板表達式,但不是全部。
JavaScript 中那些具有或可能引發副作用的表達式是被禁止的,包括:
賦值 (=, +=, -=, ...)
new運算符使用;或,的鏈式表達式
自增或自減操作符 (++和--)
和 JavaScript語 法的其它顯著不同包括:
不支持位運算|和&具有新的模板表達式運算符,比如|和?.

綁定語法:概覽

數據綁定是一種機制,用來協調用戶所見和應用數據。 雖然我們能往 HTML 推送值或者從 HTML 拉取值, 但如果把這些瑣事交給數據綁定框架處理, 應用會更容易編寫、閱讀和維護。 只要簡單地在綁定源和目標 HTML 元素之間聲明綁定,框架就會完成這項工作。

Angular 提供了各種各樣的數據綁定,本章將逐一討論。 不過我們要先從高層視角來看看 Angular 數據綁定及其語法。

綁定的類型可以根據數據流的方向分成三類: 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。

image.png

HTML attribute 與 DOM property 的對比

要想理解 Angular 綁定如何工作,重點是搞清 HTML attribute 和 DOM property 之間的區別。
attribute 是由 HTML 定義的。property 是由 DOM (Document Object Model) 定義的。
少量 HTML attribute 和 property 之間有著 1:1 的映射,如id。
有些 HTML attribute 沒有對應的 property,如colspan。
有些 DOM property 沒有對應的 attribute,如textContent。
大量 HTML attribute看起來映射到了property…… 但卻不像我們想的那樣!
最后一類尤其讓人困惑…… 除非我們能理解這個普遍原則:
That last category is confusing until you grasp this general rule:
attribute 初始化 DOM property,然后它們的任務就完成了。property 的值可以改變;attribute 的值不能改變。
例如,當瀏覽器渲染<input type="text" value="Bob">時,它將創建相應 DOM 節點, 其value property 被初始化為 “Bob”。
當用戶在輸入框中輸入 “Sally” 時,DOM 元素的value property 變成了 “Sally”。 但是這個 HTML value attribute 保持不變。如果我們讀取 input 元素的 attribute,就會發現確實沒變: input.getAttribute('value') // 返回 "Bob"。
HTML attribute value指定了初始值;DOM value property 是當前值。
disabled attribute 是另一個古怪的例子。按鈕的disabled property 是false,因為默認情況下按鈕是可用的。 當我們添加disabled attribute 時,只要它出現了按鈕的disabled property 就初始化為true,于是按鈕就被禁用了。
添加或刪除disabled attribute會禁用或啟用這個按鈕。但 attribute 的值無關緊要,這就是我們為什么沒法通過 <button disabled="false">仍被禁用</button>這種寫法來啟用按鈕。
設置按鈕的disabled property(如,通過 Angular 綁定)可以禁用或啟用這個按鈕。 這就是 property 的價值。
就算名字相同,HTML attribute 和 DOM property 也不是同一樣東西。
這句話值得再強調一次:

模板綁定是通過 property 和事件來工作的,而不是 attribute。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • 學習資料來自 Angular.cn 與 Angular.io。 模板語法 在線例子 在 Angular 中,組件扮...
    小鐳Ra閱讀 3,768評論 0 3
  • 一、起項目 根據官方教程,執行以下: 然后要把下面文件略微改一下(官方沒有寫),否則編譯出的js和ts混在一起,很...
    Angeladaddy閱讀 1,298評論 0 4
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設計動態web應用的結構框架。首先,它是...
    200813閱讀 1,631評論 0 3
  • 二十幾歲的年紀,如果不結婚,沒有對象,總是會被人問起“為什么單身”。 相比回他們一句“關你什么事”,我更想問“為什...
    蜥蜴盎閱讀 303評論 0 0
  • 周五收到華大的短信說低風險,1800買了個心安,周日明星兄考試,這周莫名又開始干嘔,雖然不是很嚴重,但已經很久沒干...
    攜子之閱讀 682評論 0 0