記一次sshpass備份資料（mysql）
學習vue 大坑，命名中短橫線與大小寫變換
vue元件中camelCased (駝峰式) 命名與 kebab-case（短橫線命名）
置頂有一個王小森於2017-07-12 10:13:47釋出40886收藏21
分類專欄：vue.js文章標籤：camelCasekebab-casevue-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>