在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: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
以上的理解是：
HTML特性不区分大小写，所以大写会转为小写。HTML作为对camelCase (驼峰命名法)的区分，会自动转为kebab-case (短横线分隔命名) 命名
- HTML中的
post-title==> porp 中的postTitle或者post-title - HTML中的
posttitle或posTtitle==> porp 中的posttitle
但在字符串模板中{{ }}语法中不能是短横线分隔命名。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。
也就是说以下的字符串模板
template: '<h3>{{ postTitle }}</h3>'
// 如果此处如果用post-title 来对应 HTML中的 post-title 会报错
所以在字符串模板中
- HTML中的
post-title==> template中的postTitle - HTML中的
posttitle或posTtitle==>template中的posttitle
2，按键修饰符中的kebab-case转换
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。
组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
相关参考文章和出处
《vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）》
《Vue事件处理-按键修饰符》
