vue 2.x 的 v-bind 指令的 .prop 事件修飾符詳解

vue 官方文檔對 .prop 修飾符的解釋是：

使用例子：

那麼，具體的原理和用法是什麼呢？這要從 html 的 DOM node 提及。

---

在 html 標籤裏，咱們能夠定義各類 attribute。在瀏覽器解析 DOM 樹渲染頁面後，每一個標籤都會生成一個對應的 DOM 節點。節點是一個對象，因此會包含一些 properties，attributes 也是其中一個property。

定義

Property：節點對象在內存中存儲的屬性，能夠訪問和設置。
Attribute：節點對象的其中一個屬性( property )，值是一個對象，能夠經過點訪問法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 讀取，經過 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在標籤裏定義的全部屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象裏以鍵值對的方式存在。

例子：

<input id="input" type="foo" value="11" class="class"></input>

打印的 attribute 對象（NamedNodeMap 對象表示元素屬性節點的無序集合）：

---

Property 與 Attribute 的差異

一、Attribute 對象包含標籤裏定義的全部屬性，Property 只包含 HTML 標準的屬性，不包含自定義屬性（eg: data-xxx）。

二、Attribute 裏的屬性的值是 html 標籤上原始的值，除非使用 setAttribute() 方法更改，不會根據用戶輸入而改變（eg: input 標籤）。Property 在頁面初始化時會映射並建立 Attribute 對象裏的標準屬性，從而節點對象能以對象的訪問方式獲取標準屬性。在用戶輸入內容修改了原始值後，Property 裏對應的屬性會隨之變化。即，查看原始值使用 Attribute，查看最新值使用 Property。（input 的 value 值也能夠經過 input.defaultValue 查看原始值）

三、Property 與 Attribute 的某些屬性名稱是徹底同樣的，例如 ref, id ；某些名稱有些輕微差異，例如 Attribute 裏的 for、class 屬性映射出來對應 Property 裏的 htmlFor、className；某些屬性名稱同樣，可是屬性值會有限制或者修改，不會徹底同樣，相關的屬性有 src, href, disabled, multiple 等。

例子：

<input src="test.html"></input>

// input.src :

// input.attributes.src.value:

四、因爲 Property 不能讀取自定義屬性，若是標籤在開始的時候對標準屬性定義了非標準範圍內的值，Property 會默認選擇一個標準值代替，致使與 Attribute 裏的屬性不徹底相等。

例子：

<input id="input" type="foo"></input>
// input.type === 'text'
// input.attributes.type === 'foo'

---

Property 與 Attribute 各自的屬性和方法

Property: http://www.w3school.com.cn/js...
Attributes: http://www.w3school.com.cn/js...

---

.prop 修飾符用途

v-bind 默認綁定到 DOM 節點的 attribute 上，使用 .prop 修飾符後，會綁定到 property

注意事項：

• 使用 property 獲取最新的值；
• attribute 設置的自定義屬性會在渲染後的 HTML 標籤裏顯示，property 不會。

修飾符用途：

經過自定義屬性存儲變量，避免暴露數據
防止污染 HTML 結構

例如：

<input id="input" type="foo" value="11" :data="inputData"></input>
// 標籤結構: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData

<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 標籤結構: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined