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

最新推荐文章于 2022-02-09 23:08:29 发布
最新推荐文章于 2022-02-09 23:08:29 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue 文章标签： vue 命名
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39319000/article/details/84659828
版权

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

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

蚁族的奋斗1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 学习之 camelcase 配置
繁夜
03-20 1465
源链接 有时候写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 2808
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['po...
vue之camelCase vs kebab-case
qq_42526440的博客
02-09 350
Prop 的大小写 (camelCase vs kebab-case) HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名法) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], tem
Vue复习之 组件和事件名字的注意，深入了解组件
furfur-jiang的博客
07-17 347
参考自官方文档，加入自己的理解和例子 Prop命名 Prop 的大小写 (camelCase vs kebab-case) HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 .
vue------关于自定义事件的总结：$attrs、$listeners、inheritAttrs: false、kebab-case 、修饰符
COCOLI_BK的博客
09-22 571
事件名(推荐使用kebab-case格式命名 或 update:myPropName) 不同于组件和 prop,触发的事件名需要完全匹配监听这个事件所用的名称：使用 kebab-case （set-font | get-url） 子父传值：通过$emit('自定义事件名（kebab-case）'，参数) ,一般子父传值需要操作事件时要用到事件名 推荐以update:myPropName的模式触发事件 :this.$emit('update:title',params) 如果触发一个 camel...
vue组件命名和props命名代码详解
10-16
1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不支持驼峰命名。在Vue模板中，你可以直接以`<my-component>`的形式使用它。 2. **camelCase（驼峰命名...
浅谈Vue初学之props的驼峰命名
12-10
这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。 重申一次，如果你使用字符串模板，那么这个限制就不存在了。 以以下代码为例： 1、当...
VueJS 组件参数名命名与组件属性转化问题
12-29
所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名： Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '...
关于vue组件内部命名规范的一些思考和意见
01-20
1. **组件名**：Vue推荐使用kebab-case（短横线分隔）命名组件，例如`my-component`。这样做可以使组件名在HTML中看起来更清晰，同时遵循Web组件的标准。 2. **props**：用于接收父组件传递的数据。为props命名时，...
Vue中的组件及路由使用实例代码详解
10-16
- 组件名通常采用驼峰式命名，但在HTML中使用时，需要转换为kebab-case（短横线分隔式），如`<my-zujian>`。 - 每个组件的`template`属性必须包含一个唯一的根元素，以确保HTML结构的正确性。 3. **组件中数据及...
vue中dom模板为什么要使用kebab-case命名法(短横线命名)
树上骑个猴的博客
01-25 1306
最近看到vue官方文档的时候，多次提及字符串模板和dom模板，对这个概念比较模糊，经查阅后记录供日后参考。 1.字符串模板 字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。 Vue.component('MyComponentA', { template: '<div MyId="123">
模板字符串、kebab-case (短横线隔开式)
地铁和人海
09-02 852
模板字符串 vue组件中的短横线隔开法
camelCased (驼峰式) 命名与 kebab-case（短横线命名）
tumi
04-12 4993
HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '&lt;span&gt;{{ my...
kebab-case
gong1422425666的博客
08-10 1万+
在vue官网上有这样的一句话：  “camelCase vs. kebab-case  HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。”  小森表示对这句话好懵啊！  经过自己的各种倒弄终于得到了下边的东西。 重点在这里： ...
vue散记：驼峰命名和短横线命名(组件和属性)
tianjiliuhen的博客
05-29 3150
vue散记：驼峰命名和短横线命名-组件和属性前言vue中的驼峰命名和短横线命名 前言   之前使用过别人写的vue+element项目，在别人搭建好的框架下修修改改、缝缝补补，感觉还行，整体流程还能走的通，但是不能总是用别人搭建好的框架啊。于是就想着自己也用vue-cli搭建一套，搭建的过程中也遇到了些问题，有些不理解的，就记下来，因为比较散，就写个散记系列吧。 vue中的驼峰命名和短横线命名   vue中组件的名称和属性的名称，在一定程度上是等效的，驼峰和短横线是等效的，如 ChildComponen
代码的两种命名方法：驼峰命名、匈牙利命名（优缺点）
热门推荐
魏波
09-24 6万+
代码的两种命名方法：驼峰命名、匈牙利命名（优缺点） 一、骆驼命名法： 　　小驼峰法（camel方法）变量一般用小驼峰法标识。 　　第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母， 例如：myFirstName、myLastName 　　大驼峰法（Upper Camel Case）也称为：帕斯卡命名法：（pascal方法）常用于类名......
驼峰命名法(CamelCase)和下划线命名法(UnderScoreCase)字符之间的转换
虎子's blog
11-19 6698
使用Guava CaseFormat类进行转换 CaseFormat.UPPER_CAMEL.to(CaseFormat.LOWER_UNDERSCORE,“ClassName”)-->class_name CaseFormat.LOWER_UNDERSCORE.to(CaseFormat.LOWER_CAMEL, "class_name")-->className
vue.esm.js:634 [Vue tip]: Prop "receivetime" is passed to component <Anonymous>, but the declared prop name is "receiveTime". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "receive-time" instead of "receiveTime".
最新发布
07-25
这个警告是因为您在使用组件时，传递的属性名大小写不一致。 Vue组件的props属性是大小写敏感的，而HTML属性是不区分大小写的。在模板中使用驼峰式命名的props时，需要使用短横线分隔的kebab-case形式。 所以，您需要将属性名从"receiveTime"改为"receive-time"，以解决这个警告。 例如，将以下代码： ``` <water-overproof-form :visible.sync="dialogVisible2" :data="formData2" :receiveTime="receivetime" @success="search" /> ``` 改为： ``` <water-overproof-form :visible.sync="dialogVisible2" :data="formData2" :receive-time="receivetime" @success="search" /> ``` 这样修改后，Vue不再会报警告提示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值