Vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线）命名

在vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线）命名有时是可以通用的。

1，props中的命名

在vue官网上有这样的一句话：

Prop 的大小写 (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '
{{ postTitle }}
'
})

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

以上的理解是：
HTML特性不区分大小写，所以大写会转为小写。HTML作为对camelCase (驼峰命名法)的区分，会自动转为kebab-case (短横线分隔命名) 命名

• HTML中的post-title ==> porp 中的 postTitle 或者 post-title
• HTML中的posttitle 或 posTtitle ==> porp 中的 posttitle

但在字符串模板中{{ }}语法中不能是短横线分隔命名。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。
也就是说以下的字符串模板

 template: '
{{ postTitle }}
'
 // 如果此处如果用post-title 来对应 HTML中的 post-title 会报错

所以在字符串模板中

• HTML中的post-title ==> template中的 postTitle
• HTML中的posttitle 或 posTtitle ==>template中的 posttitle

2，按键修饰符中的kebab-case转换

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

组件名大小写

定义组件名的方式有两种：

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

相关参考文章和出处
《vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）》
《Vue事件处理-按键修饰符》