vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）

最新推荐文章于 2025-09-18 09:32:33 发布
原创 最新推荐文章于 2025-09-18 09:32:33 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 命名

本文探讨了在JavaScript中使用驼峰命名法的组件和props如何在HTML中转换为短线命名法，以及所有事件如何统一使用短线命名法。深入解析了HTML中将camelCased转换为kebab-case的必要性，因HTML不识别大小写，统一使用小写形式。

组件，props ，事件
组件和props 在js里面用驼峰在HTML里面用短线命令法
事件在一律使用短线命名法

在html 中要把相对应的camelCased 转换成 kebab-case ，因为html 不识别大小写，一律都是小写

vue组件命名和props命名代码详解
10-16
1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不支持驼峰命名。在Vue模板中，你可以直接以`<my-component>`的形式使用它。 2. **camelCase（驼峰命名...
浅谈Vue初学之props的驼峰命名
10-18
短横线分隔命名（kebab-case）则是使用短横线来分隔单词，常见于HTML属性中，例如 `my-variable`。 ### Vue中的props驼峰命名规则 在Vue.js中，HTML特性名（HTML attributes）是大小写不敏感的，因此在HTML模板中...
vue Prop 的大小写 (camelCase vs kebab-case)
qq_33250133的博客
05-18 647
vue官方文档如下: 为什么dom中的模板不区分大小写,而字符串中的模板却区分大小写? dom模板： dom模板就是原先写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。而html标签是不区分大小写的,所以如果我们采用驼峰形式命名的组件被浏览器当作html解析时候,就会找不到对应的组件名字,从而出现渲染出错(eg:MyComponent被浏览器解析成mycomponent,所以能找到才怪) 例子如下: //全局组件 Vue.co
2025年TypeScript高级实战：KebabCase命名转换完全指南
最新发布
gitblog_01146的博客
09-18 388
你是否曾在TypeScript项目中遇到过这样的困境：API响应字段使用`camelCase`，而数据库模型却要求`snake_case`，前端CSS类名又必须是`kebab-case`？命名风格的混乱不仅导致代码可读性下降，更可能引发生产环境中的隐性Bug。根据2024年Stack Overflow开发者调查，41%的TypeScript项目因为命名不一致导致过至少一次线上故障。 本文将通过实...
vue 学习之 camelcase 配置
繁夜
03-20 1618
源链接 有时候写vue会遇到如下错误， error Identifier ‘x_label’ is not in camel case 这是因为ESLint代码规范检测的要求，必须要求用骆驼式变量名，当我们写成下划线形式就出现error 解决办法： 1）对一个文件 如果是JS文件，在开头加上这样一行代码来取消对骆驼式变量名的检测： /* eslint-disable camelcase */ 如果是TS文件： /* eslint-disable @typescript-eslint/camelcase */
vue 驼峰的坑
zhongmei121的专栏
10-17 2867
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['po...
vue之camelCase vs kebab-case
qq_42526440的博客
02-09 446
Prop 的大小写 (camelCase vs kebab-case) HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名法) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], tem
Vue注册组件命名时不能用大写的原因浅析
10-17
在Vue的官方文档中明确指出，当使用非字符串模板时，驼峰命名（camelCase）的组件命名在模板中的使用需要转换为短横线分隔命名（kebab-case），这是由HTML的特性决定的。HTML特性是不区分大小写的，因此，在定义组件...
vue项目，eslint怎么实现引入驼峰命名的组件，引用时使用短横线
03-13
好的，我现在需要解决用户的问题：如何在Vue项目中配置ESLint以支持通过短横线引用驼峰命名的组件。首先，我需要回忆Vue组件命名的规则以及ESLint的相关配置。 用户提到的是驼峰命名和短横线命名的转换，这通常涉及...
Vue事件大小写驼峰命名导致无法执行问题解决
qq_39123467的博客
05-31 571
所以我们事件命名时候不要使用 camelCase 和 PascalCase 来命名了，因为就算你使用该命名，在DOM模板中还是会被自动转化为全小写。首先补充下基础知识：HTML是不区分大小写的。所以一般情况下，JS的大小写变量放到HTML中，会将大写改成小写，并在前面添加短杠。事件名首先不存在 任何自动转化大小写的能力，因此所触发的事件名称必须与监听的名称 完全匹配。则监听 customEvent 名字的 custom-event 会无效。驼峰命名事件名不会正常执行。但是假如你想触发一个事件。
vue2.x 组件-自定义事件
monian187的博客
05-02 1002
vue2.x 组件-自定义事件
Vue驼峰与短横线分割命名中有哪些坑
qq_38334677的博客
02-12 2286
Vue驼峰命名法指的是将变量以驼峰形式命名，例如 userName、userId 等，而短横线分隔符法则指的是用短横线分隔变量名，例如 user_name、user_id 等。两种命名方式在实际应用中都有其优势和缺点，但是它们的主要区别在于可读性和可维护性。Vue使用驼峰命名法有助于提高变量的可读性，因为驼峰命名法可以更好地表示变量的意思，但是这也可能对于像JavaScript这样的动态语言带来问题，因为它可能会引发一些预期以外的问题。
Vue项目中该使用驼峰命名还是短横线命名
qq_41348755的博客
01-17 6581
在阅读vue官方文档中关于props的时候发现这么两段话： HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： const app = Vue.createApp({}) app.component('blog-post', { // 在 JavaScript 中使用 camelCase
vue组件的驼峰式命名与短横线分割命名
weixin_38069018的博客
06-28 3808
vue组件的驼峰式命名与短横线分割命名 参考：https://blog.youkuaiyun.com/qq_43650979/article/details/105839130 官网给出说明为： 官网给出说明为： 1.注册组件的时候使用了驼峰命名 如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
Vue组件通信
weixin_52629158的博客
05-24 329
此时，$event的值就是5或者10（子组件传递过来的值），而不是前面的事件对象。接着，我们看下 $parent($root)和$children($refs和ref) 怎么进行 组件之间的消息传递（也就是我们说的 组件之间的通信）//触发自定义事件传递数据this.$bus.$emit('自定义事件名','传递的数据')我们通过 this.$parent 可以 在子实例（子组件）中 拿到 父实例（父组件）里的任何东西！传递数据方，通过一个事件触发hub.$emit('自定义事件名'，传递的数据)
vue.js 组件命名和组件prop属性命名
gditzmr的专栏
05-13 1125
（1）父组件标签命名是“驼峰命名法”命名。因为HTML不支持大小写。浏览器会将大写转为小写。 所以如果父组件标签使用如“vueHtml”的命名，则在vue里相应的是“vuehtml”。 （2）父组件标签命名使用短横线分隔(如“vue-html”)，在vue里不变的使用（“vue-html”）。 （3）vue的组件的props属性支持驼峰命名,不支持连接线命名。所以如果父组件标签中props属性命名为“outer-message”,则在vue里使用“outerMessage”与之对..
Vue组件注册方式（驼峰与横线）
qq_43170213的博客
12-08 1437
首先看一下官方的文档说明 总结起来也就是： （1）当使用短横线分割命名定义组件，那么调用这个组件的时候，必须要用短横线。 （2）当使用驼峰式命名的时候，可以在template:’'中使用驼峰式或者短横线都可以，但是在Dom中必须使用短横线的形式。 ...
Vue中调用组件使用kebab-case（短横线）命名法和使用大驼峰的区别
轻风细雨_林木木
10-13 912
字符串模版字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。})</div>dom模版(或者称为Html模板)dom模板就是写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值