翻看Vue API文檔時發現v-bind有一個修飾符.prop比較特殊:
.prop - 作爲一個 DOM property 綁定而不是作爲 attribute 綁定。
文檔還給了一個stack overflow上的問題差別在哪裏?來解釋,感覺高票答案通俗易懂,遂翻譯一波。
譯文
當編寫一段HTML代碼的時候,你可以在HTML標籤上面定義attribute
,當瀏覽器編譯完HTML代碼,會生成與之對應的一個個DOM節點
,每個DOM節點
是一個對象,所以它擁有很多property
。例如以下代碼:
<input type="text" value="Name:">
input
標籤有兩個attribute
,即type
和value
。當瀏覽器編譯完這段代碼,一個HTMLInputElement對象會被創建,這個對象包含一系列的property
,例如accept
, accessKey
, align
, alt
, attributes
, autofocus
, baseURI
, checked
, childElementCount
, childNodes
, children
, classList
, className
, clientHeight
等。
對於一個DOM節點對象,property
就是這個對象上的屬性;attribute
是該對象對應的HTML標籤元素上的屬性。
當一個HTML標籤元素解析成一個DOM節點對象時,這個節點對象上有很多property
屬性名和HTML標籤元素上的attribute
相同或相似,但不一定是一一映射關係。比如:
<input id="the-input" type="text" value="Name:">
對於上述HTML標籤,其對應的DOM節點對象的property
包括id
、type
、value
(當然還有別的):
-
id
DOM節點對象上的id
屬性(property
)和HTML標籤上的id
屬性(attribute
)是映射關係。當讀取DOM節點對象的id
屬性值時就是讀取HTML標籤上的id
屬性值,當給DOM節點對象的id
屬性寫入值時就是往HTML標籤上的id
屬性寫入值。id
是一個純映射
屬性,映射過程中不會產生副作用,比如修改或者限制其值。 -
type
和id
屬性一樣,DOM節點對象上的type
屬性(property
)和HTML標籤上的type
屬性(attribute
)是映射關係。當讀取DOM節點對象的id
屬性值時就是讀取HTML標籤上的id
屬性值,當給DOM節點對象的id
屬性寫入值時就是往HTML標籤上的id
屬性寫入值。但是,type
屬性不是一個純映射屬性,因爲在映射過程中,它的值會被限制在已知類型中,比如input
支持的有效type
類型。舉個例子,對於<input type="foo">
這樣一個HTML標籤,Input.getAttribute('type')
的返回值是foo
,而Input.type
的返回值爲text
-
value
與上面兩個屬性相反,DOM節點對象上的value
屬性(property
)和HTML標籤上的value
屬性(attribute
)不存在映射關係,它就是當前input
輸入框的值。當用戶改變輸入框中的值,DOM對象上的value
屬性會跟着變化。假如用戶在輸入框中輸入'John'
,那麼Input.value
的返回值是John
,而Input.getAttribute('value')
的返回值是Name:
。
從上面可以看出,DOM節點對象上的value
屬性(property
)是當前輸入框內容的映射,而HTML標籤上的value
屬性(attribute
)是HTML標籤元素上初始設置的值(或者代碼設置)。
如果你需要知道當前輸入框的內容,就直接讀取DOM節點對象的value
屬性(property
);如果你想知道輸入框的初始值是什麼,就直接讀取HTML標籤元素的value
屬性(attribute
),或者使用DOM節點對象的defaultValue
屬性,它與HTML標籤上的value
屬性(attribute
)是純映射關係:
Input.value // returns "John"
Input.getAttribute('value') // returns "Name:"
Input.defaultValue // returns "Name:"
有些DOM節點對象上的property
屬性與HTML標籤上的attribute
屬性一一映射(名字一樣),比如rel
、id
;有些名字稍微有些變化,比如DOM節點對象htmlFor
屬性對應HTML標籤上的for
屬性,DOM節點對象className
屬性對應HTML標籤上的class
屬性;更多的是兩者雖然有映射關係,但是存在副作用,會限制或者修改屬性值,比如src
、href
、disabled
、multiple
等。
原文
What is the difference between properties and attributes in HTML