命名方法主要分三种,效果如其名称:

camelCase

kebab-case

PascalCase

首先，DOM模板内部元素的属性名称是不区分大小写的，比如以下三种表示是等价的：

1
2
3

<p style="color:red">红色</p>
<p sTYLe="color:red">红色</p>
<p STYLE="color:red">红色</p>

但在vue.js中，是大小写敏感的，所以部分名称在vue.js中定义的时候采用camelCase,PascalCase方式命名，而在dom模板内使用的时候，可以采用相应的kebab-case名称，当然前提是命名要规范，比如"myComPoNent"肯定无法与"my-component"对应。

使用字符串模板时，以下规则会有例外，用红字标出。

  • 组件名称

    • 在单文件组件和字符串模板中，组件名应该总是PascalCase,在DOM模板中总是kebab-case。 使用kebab-case时，引用组件的时候只能用kebab-case。 使用PascalCase时，引用组件的时候可以使用kebab-case或PascalCase，但只是引用，在DOM中（使用字符串模板时例外)使用时只能用kebab-case。

      尽管全部采用kebab-case也可以，但是采用PascalCase有如下优势：

      • 编辑器可以在模板里自动补全组件名，因为 PascalCase 同样适用于 JavaScript。
      • <MyComponent> 视觉上比 <my-component> 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
      • 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。

    • JS/JSX中的组件名通常用PascalCase。但是如果你的应用只通过Vue.component定义全局组件，则建议使用kebab-case。官方原文解释：

      在 JavaScript 中，PascalCase 是类和构造函数 (本质上任何可以产生多份不同实例的东西) 的命名约定。Vue 组件也有多份实例，所以同样使用 PascalCase 是有意义的。额外的好处是，在 JSX (和模板) 里使用 PascalCase 使得代码的读者更容易分辨 Vue 组件和 HTML 元素。

      然而，对于只通过 Vue.component 定义全局组件的应用来说，我们推荐 kebab-case 作为替代。原因是：

      • 全局组件很少被 JavaScript 引用，所以遵守 JavaScript 的命名约定意义不大。
      • 这些应用往往包含许多 DOM 内的模板，这种情况下是必须使用 kebab-case 的。

  • 单文件组件的文件名

    要么全部用kebab-case,用么全部用PascalCase,保持统一

    1
2
3
4
5

    components/
|- MyComponent.vue

components/
|- my-component.vue

  • 事件名称

    始终使用kebab-case。官方文档说明：

    不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

  • Prop名称（组件（component）中的props)）

    如果在props定义时使用了camelCase,则在html中使用该属性的时候，需要手动改成kebab-case。使用字符串模板时例外。

    官方风格指南建议在命名时采用camelCase,而在模板和JSX中使用kebab-case

    1
2
3
4
5
6
7
8
9

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


<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>