vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
学习vue 大坑，命名中短横线与大小写变换
vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
置顶有一个王小森于 2017-07-12 10:13:47 发布40886 收藏 21
分类专栏： vue.js 文章标签： camelCase kebab-case vue-js
版权
vue.js专栏收录该内容
43 篇文章3 订阅
订阅专栏
在vue官网上有这样的一句话：
“camelCase vs. kebab-case
HTML 属性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。”
小森表示对这句话好懵啊！
经过自己的各种倒弄终于得到了下边的东西。
##重点在这里：
1、html特性不区分大小写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop动态=绑定</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<!--<child v-bind:myMEssage="message"></child>-->
<child v-bind:mymessage="message"></child>
<!--由于HTML的特性不识别大小写，所以“myMEssage”与“mymessage”是一样的，都解析为小写。故而下边的组件也应该是小写。-->
</div>
<script>
Vue.component('child',{
//此处都为小写。
props:['mymessage'],
template:'<p>{{mymessage}}</p>'
});
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</body>
</html>
2、组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop动态=绑定</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<child v-bind:my-message="message"></child>
<!--此处的my-message只能是短横线命名（若为驼峰式则全部转换为小写。）-->
</div>
<script>
Vue.component('child',{
// props:['my-message'],
props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式，他们在此处是相互转换的
template:'<p>{{myMessage}}</p>'
// 此处有限制，是字符串模板，{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。如下图：
});
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」