vue 有关于命名大小写的问题 | Jefsky - 程序猿甜品店😊用心积累,无心成荫

记录一下命名的的一些坑

引入文件时, 默认第一个字母大写

import Vue from 'vue'

组件命名的大小写,定义组件名的方式有两种：

使用 kebab-case(短横线分隔命名)

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

当使用 kebab-case 定义一个组件时，
也必须在引用这个自定义元素时使用 kebab-case，例如。

使用 PascalCase(首字母大写命名)

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

两者均可
当使用 PascalCase 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

prop命名的大小写
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>

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

自定义事件的大小写
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，
所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，
所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名,禁止使用驼峰命名, 直接使用中划线即可
————————————————
版权声明：本文为CSDN博主「ZH_TX」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ZHXT__/article/details/102791205

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：JefskyWong ——程序猿甜品店
链接：https://www.jefsky.com/blog/98
来源：https://www.jefsky.com/