vue大小写总结

1. 组件

组件的定义有两种命名方式：PascalCase   和   kebab-case

PascalCase  定义的组件的引用：PascalCase   和   kebab-case  均可

// PascalCase定义方式
Vue.component('MyComponentName', { /* ... */ })
 
 
// 引用方式一
<my-component-name />
 
// 引用方式二
<MyComponentName />

kebab-case   定义的组件的引用：kebab-case  

// kebab-case定义方式
Vue.component('my-component-name', { /* ... */ })
 
 
// 引用方式
<my-component-name />

2.  property

HTML中的attribute名大小写不敏感，浏览器会把所有大写字符解释为小写。这就导致在js中以   camelCase  方式命名的prop名，在HTML中需要使用  kebab-case   的方式引用

// PascalCase方式定义property
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
 
 
// kebab-case方式引用property
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello"></blog-post>

3. 事件名

自定义的事件名不存在任何大小写的转换，必须保证定义的事件名与引用的事件名完全一致且都为小写

反例

// 定义一个包含大写的事件名
this.$emit('myEvent')
 
 
<!-- 引用不到一 -->
<my-component v-on:my-event="doSomething"></my-component>
 
<!-- 引用不到二 -->
<my-component v-on:myEvent="doSomething"></my-component>
 
<!-- 引用不到三 -->
<my-component v-on:myevent="doSomething"></my-component>

正例：

// 定义事件
this.$emit('myevent')
 
 
// 引用
<my-component v-on:myevent="doSomething"></my-component>