Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case

Prop 的大小写

<div id="prop-demo">
<p>Prop 的大小写 (camelCase vs kebab-case)</p>
<prop-blog  postTitle="hi"></prop-blog>
</div>

Vue.component('prop-blog',{
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})

new Vue({
el:'#prop-demo'
})

改为：
<div id="prop-demo">
<p>Prop 的大小写 (camelCase vs kebab-case)</p>
<!-- 在 HTML 中是 kebab-case 的 -->
<prop-blog  post-title="hi"></prop-blog>
</div>

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
重申一次，如果你使用字符串模板，那么这个限制就不存在了。