vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
在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>
div>
<script>
Vue.component('child',{
//此处都为小写。
props:['mymessage'],
template:'{{mymessage}}
'
});
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>
div>
<script>
Vue.component('child',{
// props:['my-message'],
props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式，他们在此处是相互转换的
template:'{{myMessage}}
'
// 此处有限制，是字符串模板，{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。如下图：
});
new Vue({
el:'#app',
data:{
message:''
}
})
script>
body>
html>
文章来源：
https://blog.csdn.net/wangxiaoxiaosen/article/details/75005949