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