成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

QiuyueZhong / 3431人閱讀

摘要：例子與各自的屬性和方法修飾符用途默認(rèn)綁定到節(jié)點(diǎn)的上，使用修飾符后，會綁定到注意事項(xiàng)使用獲取最新的值設(shè)置的自定義屬性會在渲染后的標(biāo)簽里顯示，不會。修飾符用途通過自定義屬性存儲變量，避免暴露數(shù)據(jù)防止污染結(jié)構(gòu)例如標(biāo)簽結(jié)構(gòu)的值標(biāo)簽結(jié)構(gòu)

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

使用例子：

那么，具體的原理和用法是什么呢？這要從 html 的 DOM node 說起。

在 html  標(biāo)簽里，我們可以定義各種 attribute。在瀏覽器解析 DOM 樹渲染頁面后，每個標(biāo)簽都會生成一個對應(yīng)的 DOM 節(jié)點(diǎn)。節(jié)點(diǎn)是一個對象，所以會包含一些 properties，attributes 也是其中一個property。
定義 
Property：節(jié)點(diǎn)對象在內(nèi)存中存儲的屬性，可以訪問和設(shè)置。
Attribute：節(jié)點(diǎn)對象的其中一個屬性( property )，值是一個對象，可以通過點(diǎn)訪問法 document.getElementById("xx").attributes 或者 document.getElementById("xx").getAttributes("xx") 讀取，通過 document.getElementById("xx").setAttribute("xx",value) 新增和修改。
在標(biāo)簽里定義的所有屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象里以鍵值對的方式存在。

例子：

打印的 attribute 對象（NamedNodeMap 對象表示元素屬性節(jié)點(diǎn)的無序集合）：

Property 與 Attribute 的差別

1、Attribute 對象包含標(biāo)簽里定義的所有屬性，Property 只包含 HTML 標(biāo)準(zhǔn)的屬性，不包含自定義屬性（eg: data-xxx）。

2、Attribute 里的屬性的值是 html 標(biāo)簽上原始的值，除非使用 setAttribute() 方法更改，不會根據(jù)用戶輸入而改變（eg: input 標(biāo)簽）。Property 在頁面初始化時會映射并創(chuàng)建 Attribute 對象里的標(biāo)準(zhǔn)屬性，從而節(jié)點(diǎn)對象能以對象的訪問方式獲取標(biāo)準(zhǔn)屬性。在用戶輸入內(nèi)容修改了原始值后，Property 里對應(yīng)的屬性會隨之變化。即，查看原始值使用 Attribute，查看最新值使用 Property。（input 的 value 值也可以通過 input.defaultValue 查看原始值）

3、Property 與 Attribute 的某些屬性名稱是完全一樣的，例如 ref, id ；某些名稱有些輕微差別，例如 Attribute 里的 for、class 屬性映射出來對應(yīng) Property 里的 htmlFor、className；某些屬性名稱一樣，但是屬性值會有限制或者修改，不會完全一樣，相關(guān)的屬性有 src, href, disabled, multiple 等。

例子：

// input.src :

// input.attributes.src.value:

4、由于 Property 不能讀取自定義屬性，如果標(biāo)簽在開始的時候?qū)?biāo)準(zhǔn)屬性定義了非標(biāo)準(zhǔn)范圍內(nèi)的值，Property 會默認(rèn)選擇一個標(biāo)準(zhǔn)值代替，導(dǎo)致與 Attribute 里的屬性不完全相等。

例子：


// 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 默認(rèn)綁定到 DOM 節(jié)點(diǎn)的 attribute 上，使用 .prop 修飾符后，會綁定到 property

注意事項(xiàng)：

使用 property 獲取最新的值；

attribute 設(shè)置的自定義屬性會在渲染后的 HTML 標(biāo)簽里顯示，property 不會。

修飾符用途：

通過自定義屬性存儲變量，避免暴露數(shù)據(jù)
防止污染 HTML 結(jié)構(gòu)

例如：


// 標(biāo)簽結(jié)構(gòu): 
// input.data === undefined
// input.attributes.data === this.inputData


// 標(biāo)簽結(jié)構(gòu): 
// input.data === this.inputData
// input.attributes.data === undefined

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51695.html

相關(guān)文章

  • 詳解vue組件三大核心概念

    摘要：前言本文主要介紹屬性事件和插槽這三個基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅(qū)動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

    rickchen 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    itvincent 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    malakashi 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    Richard_Gao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<