kebab-case（短横线命名法）是一种使用连字符连接小写单词的命名方式，Vue官方推荐在模板中使用。
与camelCase（驼峰式）和snake_case（蛇形命名）不同，kebab-case在HTML中更具可读性和一致性。
Vue会自动转换模板中的kebab-case与JS中的camelCase/PascalCase，建议组件名、事件名和属性使用kebab-case，而方法和变量使用camelCase。
这种约定提高了代码可维护性，并与HTML原生属性风格保持一致。
kebab-case（短横线命名法）
kebab-case是一种命名约定，单词之间用连字符（短横线-）连接，所有字母通常为小写。
特点：
单词之间使用连字符
-分隔通常全部小写
看起来像烤串（kebab）上的肉块
示例：
// kebab-case 示例 custom-event user-profile submit-form date-picker side-bar-menu
与其他命名约定的对比
1.camelCase（驼峰命名法）
// 小驼峰（首字母小写） customEvent userProfile submitForm // 大驼峰/帕斯卡命名法（首字母大写） CustomEvent UserProfile SubmitForm
2.snake_case（蛇形命名法）
custom_event user_profile submit_form DATE_PICKER // 通常用于常量
3.PascalCase（帕斯卡命名法）
CustomEvent UserProfile SubmitForm DatePicker
在 Vue 中的使用
Vue 官方推荐
<!-- Vue 推荐在模板中使用 kebab-case --> <template> <!-- 组件名使用 kebab-case --> <user-profile @custom-event="handleEvent" /> <!-- 事件名使用 kebab-case --> <button @click="submitForm">提交</button> <!-- 属性名使用 kebab-case --> <date-picker :start-date="startDate" /> </template> <script> // 但在 JavaScript 中使用 camelCase export default { methods: { handleCustomEvent() { // 方法名使用 camelCase }, submitForm() { // 方法名使用 camelCase } } } </script>实际转换规则
Vue 会自动在 kebab-case 和 camelCase 之间进行转换：
<!-- 模板中使用 kebab-case --> <my-component :custom-prop="value" @custom-event="handler" /> <!-- 等价于 JavaScript 中的 --> myComponent.customProp = value myComponent.$on('customEvent', handler)Vue 中的具体应用场景
1.组件名
vue
<!-- 注册组件 --> components: { 'user-profile': UserProfile // kebab-case } <!-- 使用 --> <user-profile /> <!-- ✅ 推荐 --> <UserProfile /> <!-- ⚠️ 在 Vue 模板中也能工作，但不推荐 -->2.自定义事件
vue
<!-- 子组件触发 --> this.$emit('user-selected', userId) // kebab-case <!-- 父组件监听 --> <child-component @user-selected="handleSelection" /> <!-- ✅ 推荐 --> <child-component @userSelected="handleSelection" /> <!-- ⚠️ 也能工作 -->3.Props 属性
vue
<!-- 父组件传递 --> <my-component :user-name="name" /> <!-- ✅ 推荐 --> <!-- 子组件接收 --> props: { userName: String // 自动映射 }4.Vue Router 路由
javascript
// 路由定义 const routes = [ { path: '/user-profile', // URL 路径使用 kebab-case name: 'UserProfile', // 路由名使用 PascalCase component: UserProfile } ]为什么 Vue 推荐 kebab-case？
HTML 不区分大小写
HTML 属性和标签名不区分大小写
customEvent和customevent在 HTML 中是相同的
一致性
<!-- 原生 HTML 属性使用短横线 --> <div>// kebab-case 更容易阅读长名称 'user-profile-management-system' // ✅ 清晰 'userProfileManagementSystem' // ⚠️ 长名称时较难阅读
实际示例对比
vue
<!-- 使用 kebab-case（推荐） --> <template> <user-profile-card :user-data="user" @profile-updated="updateProfile" class="main-content" /> </template> <!-- 混合使用（不推荐） --> <template> <UserProfileCard :userData="user" @profileUpdated="updateProfile" class="main-content" /> </template>总结
kebab-case: 用于 HTML 模板、自定义事件名、DOM 属性
camelCase: 用于 JavaScript 代码、方法名、变量名
PascalCase: 用于组件定义、类名、构造函数
Vue 会自动处理这些命名约定之间的转换，但遵循官方推荐可以使代码更加一致和可维护。
