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>

 

posted @   蓝色精灵jah  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2022-07-25 uniapp的原生导航栏返回键和右边的点击事件
点击右上角即可分享
微信分享提示