## 一、命名方式 包括三种命名方式； 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`时被调用。