Vue.js 複習：component 命名

我們在Vue使用組件，一般都是用Vue.component( )來寫Vue.component( )的第一個參數是組建名稱，第二個參數是物件，裡頭會有data、template、methods...etc

Vue.component("組件名稱", {
 <u>//....</u>
}

組件名稱基本上會有三種命名方式 1.kebab-case 串燒式命名法 各單字之間用「-」隔開

2.camelCase  駝峰式命名法 首個單字小寫，後面各單字開頭大寫

3.PascalCase 帕斯卡命名法 首個單字大寫，後面各單字開頭也大寫

Vue組件可以使用以上三種方式命名，但要注意的是，轉換成組件標籤後，一律是kebab-case 串燒式命名法 例如：

//kebab-case 串燒式命名法
Vue.component("user-table", {
//...
})

//kcamelCase  駝峰式命名法
Vue.component("adminTable", {
//...
})

//PascalCase 帕斯卡命名法
Vue.component("ShopTable", {
//...
})

這三個這樣寫都是可以的，都符合規定不會報錯，只是後面要使用組件標籤時，一律變成

<user-table></user-table>

<admin-table></admin-table>

<shop-table></shop-table>

也就是變成標籤時，一律用kebab-case串燒式命名法， Vue會自動幫忙把駝峰式、帕斯卡命名組件轉成串燒式命名的標籤

這是為什麼呢？別忘記： HTML原生標籤與規範是沒有在大寫的！