資訊專欄INFORMATION COLUMN
摘要：例子與各自的屬性和方法修飾符用途默認綁定到節點的上，使用修飾符后，會綁定到注意事項使用獲取最新的值設置的自定義屬性會在渲染后的標簽里顯示，不會。修飾符用途通過自定義屬性存儲變量，避免暴露數據防止污染結構例如標簽結構的值標簽結構
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 對象里以鍵值對的方式存在。
例子：
打印的 attribute 對象（NamedNodeMap 對象表示元素屬性節點的無序集合）：
1、Attribute 對象包含標簽里定義的所有屬性，Property 只包含 HTML 標準的屬性，不包含自定義屬性（eg: data-xxx）。
2、Attribute 里的屬性的值是 html 標簽上原始的值，除非使用 setAttribute() 方法更改，不會根據用戶輸入而改變（eg: input 標簽）。Property 在頁面初始化時會映射并創建 Attribute 對象里的標準屬性，從而節點對象能以對象的訪問方式獲取標準屬性。在用戶輸入內容修改了原始值后，Property 里對應的屬性會隨之變化。即，查看原始值使用 Attribute，查看最新值使用 Property。（input 的 value 值也可以通過 input.defaultValue 查看原始值）
3、Property 與 Attribute 的某些屬性名稱是完全一樣的，例如 ref, id ；某些名稱有些輕微差別，例如 Attribute 里的 for、class 屬性映射出來對應 Property 里的 htmlFor、className；某些屬性名稱一樣，但是屬性值會有限制或者修改，不會完全一樣，相關的屬性有 src, href, disabled, multiple 等。
例子：
// input.src :
// input.attributes.src.value:
4、由于 Property 不能讀取自定義屬性，如果標簽在開始的時候對標準屬性定義了非標準范圍內的值，Property 會默認選擇一個標準值代替，導致與 Attribute 里的屬性不完全相等。
例子：
// input.type === "text" // input.attributes.type === "foo"
Property: http://www.w3school.com.cn/js...
Attributes: http://www.w3school.com.cn/js...
v-bind 默認綁定到 DOM 節點的 attribute 上，使用 .prop 修飾符后，會綁定到 property
注意事項：
使用 property 獲取最新的值；
attribute 設置的自定義屬性會在渲染后的 HTML 標簽里顯示，property 不會。
修飾符用途：
通過自定義屬性存儲變量，避免暴露數據
防止污染 HTML 結構
例如：
// 標簽結構: // input.data === undefined // input.attributes.data === this.inputData // 標簽結構: // input.data === this.inputData // input.attributes.data === undefined
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51695.html
摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變，我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...
摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。只當點擊鼠標右鍵時觸發只當點擊鼠標中鍵時觸發以模式添加偵聽器，減少額外的監聽，提高性能表示永遠不會調用。記住，指令函數能夠接受所有合法的表達式。 思維導圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關于key 官方...
閱讀 3042·2021-09-22 14:59
閱讀 1874·2021-09-22 10:02
閱讀 2114·2021-09-04 16:48
閱讀 2264·2019-08-30 15:53
閱讀 2969·2019-08-30 11:27
閱讀 3407·2019-08-29 18:35
閱讀 965·2019-08-29 17:07
閱讀 2674·2019-08-29 13:27
