## 一、命名方式 包括三種命名方式； camelCased：testObject kebab-case：test-object PascalCase：TestObject 在vue.js應用中，注意以下這些場景的命名方式規則； ### 1、props中的命名 使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名； ``` Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post> ``` ### 2、組件命名 定義組件名的方式有兩種：kebab-case和PascalCase； ~~~ //kebab-case Vue.component('my-component-name', { /* ... */ }) //PascalCase Vue.component('MyComponentName', { /* ... */ }) ~~~ 當使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。 >[danger] 所以，建議還是使用kebab-case； ### 3、自定義事件命名 不同于組件和 prop，事件名不會被用作一個 JavaScript 變量名或屬性名，不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。 >[danger] 所以，建議還是使用kebab-case； ``` <my-component v-on:my-event="do-some-thing"></my-component> this.$emit('do-some-thing') ``` ### 4、按鍵修飾符 你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符； ``` <input v-on:keyup.page-down="onPageDown"> ``` 在上述示例中，處理函數只會在`$event.key`等于`PageDown`時被調用。