原文:https://www.jianshu.com/p/efc704d713c7瀏覽器
該文摘自angular的官方文檔,老外對概念的解釋仍是很到位和容易理解的spa
attribute 是由 HTML 定義的。property 是由 DOM (Document Object Model) 定義的。事件
attribute 初始化 DOM property,而後它們的任務就完成了。property 的值能夠改變;attribute 的值不能改變。文檔
例如,當瀏覽器渲染<input type="text" value="Bob">時,它將建立相應 DOM 節點, 其value property 被初始化爲 「Bob」。get
當用戶在輸入框中輸入 「Sally」 時,DOM 元素的value property 變成了 「Sally」。 可是這個 HTML value attribute 保持不變。若是咱們讀取 input 元素的 attribute,就會發現確實沒變: input.getAttribute('value') // 返回 "Bob"。input
HTML attribute value指定了初始值;DOM value property 是當前值。模板
disabled attribute 是另外一個古怪的例子。按鈕的disabled property 是false,由於默認狀況下按鈕是可用的。 當咱們添加disabled attribute 時,只要它出現了,按鈕的disabled property 就初始化爲true,因而按鈕就被禁用了。angular
添加或刪除disabled attribute會禁用或啓用這個按鈕。而與attribute 的值無關,這就是咱們爲何無法經過 <button disabled="false">仍被禁用</button>這種寫法來啓用按鈕。渲染
設置按鈕的disabled property(如,經過 Angular 綁定)能夠禁用或啓用這個按鈕。 這就是 property 的價值。數據
就算名字相同,HTML attribute 和 DOM property 也不是同同樣東西。
對於angular而言,這句話很重要,得再強調一次:
模板綁定是經過 property 和事件來工做的,而不是 attribute。
在 Angular 的世界中,attribute 惟一的做用是用來初始化元素和指令的狀態。 當進行數據綁定時,只是在與元素和指令的 property 和事件打交道,而 attribute 就徹底靠邊站了。