记一次Vue组件无法生效的坑

今天写Vue的时候遇到了件怪事，按类似如下这样的方式定义了几个组件，该写的都写了。结果死活生不了效：

<div id="app">
    <myHello></myHello>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("myHello", {
     
       template: '
你好
'
    });
    var vm = new Vue({
     
        el: "#app",
        data: {
     
            type: 'A'
        }
    })
</script>

最后问题是出在组件命名方式上面，改成小写字母就好，因为html不区分大小写：

<div id="app">
    <myhello></myhello>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("myhello", {
     
       template: '
你好
'
    });
    var vm = new Vue({
     
        el: "#app",
        data: {
     
            type: 'A'
        }
    })
</script>

网上查了下，如果用大写字母的话，在html标签中就得用短横线来分割单词，下面这样的写法也可以：

div id="app">
    <my-hello></my-hello>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("myHello", {
     
       template: '
你好
'
    });
    var vm = new Vue({
     
        el: "#app",
        data: {
     
            type: 'A'
        }
    })
</script>
</body>