淺談Vue初學(xué)之props的駝峰命名
在vue的中文官網(wǎng)有這樣的說明：HTML 中的特性名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名。
重申一次，如果你使用字符串模板，那么這個(gè)限制就不存在了。
以以下代碼為例：
1、當(dāng)組件中template及props等使用駝峰式命名，在html中對(duì)應(yīng)的改成短橫線命名方式。
2、當(dāng)組件中template及props等使用字符串模板，在html中改成對(duì)應(yīng)的小寫。
源碼說明：
在Vue的源碼中創(chuàng)建Vue組件的時(shí)候createComponent()，解析組件的相關(guān)屬性
// extract props var propsData = extractPropsFromVNodeData(data, Ctor, tag);
而，在extractPropsFromVNodeData()中，Vue通過調(diào)用內(nèi)部方法hyphenate，把駝峰形式的屬性轉(zhuǎn)換為橫斷線形式。
除此之外，Vue在initProps()，validateProp()時(shí)，都將駝峰形式的屬性轉(zhuǎn)換為橫斷線形式。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了用vue3寫了一個(gè)Json-Preview的相關(guān)知識(shí),引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識(shí)，本文通過實(shí)例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
如何在vue3+ts項(xiàng)目中使用query和params傳參
Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關(guān)于如何在vue3+ts項(xiàng)目中使用query和params傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue?實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度
這篇文章主要介紹了在vue中實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
深入解析Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue 中url 鏈接左邊的小圖標(biāo)更改問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
vue的路由動(dòng)畫切換頁(yè)面無(wú)法讀取meta值的bug記錄
這篇文章主要介紹了vue的路由動(dòng)畫切換頁(yè)面無(wú)法讀取meta值的bug記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05