vuejs2.0以上版本组件命名的问题

最近写组件的时候，发现调用组件时没有生效，代码如下：

<div id="component1">
    <firstComponent></firstComponent>
</div>

<script>
    Vue.component('firstComponent',{
        template: '<h2>Hello,component!</h2>'
    });
    new Vue({
        el:'#component1'
    });
</script>

原因分析：

要了解原因，首先需要了解，调用组件的流程。

vuejs2.0以上版本有两种调用组件的方式：

1.在DOM中直接调用组件（上面代码就是此种方式）

调用组件的元素全部会被全部解析为小写字母，比如<Hello-Vue></Hello-Vue>会被解析为<hello-vue></hello-vue>,然后去匹配组件名，匹配组件名顺序是：hello-vue(全小写)，helloVue(Camel Case即驼峰命名法)，HelloVue（PascalCase即帕斯卡命名法），如果能够匹配到组件，就可以使组件生效。

再回到例子中来，定义的firstComponent组件是在DOM中直接调用，vuejs会把<firstComponent>标签全部解析为小写，即firstcomponent，然后在用自定义标签名firstcomponent去查询组件名，因为firstcomponent没有被‘-’分开（即first-component），所以被看成是一个单词，所以三种形式的组件名是firstcomponent，firstComponent，FirstComponent，那么就匹配不到定义的firstComponent组件，组件调用不生效。

2.Vue 2.0引用了virtual DOM，组件模板解析不依赖DOM

此种调用是这种方式：

<div id="component1">
</div>

<script>
    Vue.component('firstComponent',{
        template: '<h2>Hello,component!</h2>'
    });
    new Vue({
        el:'#component1'，

template:'<firstComponent></firstComponent>'
});
</script>

使用 Virtual DOM 解析模板时，不必像 DOM 方式那样将模板中的标签名转成小写，而是原汁原味地保留原始标签名。

在创建Vue实例里有一个template:'<firstComponent></firstComponent>'属性，那么就会用firstComponent去匹配组件名，所以这种组件调用方式是有效的。

问题解决方法：

综上所述，该问题的解决方法如下：

方法1：DOM中调用，将组件名全改为小写

<div id="component1">
    <firstComponent></firstComponent>
</div>

<script>
    Vue.component('firstcomponent',{
        template: '<h2>Hello,component!</h2>'
    });
    new Vue({
        el:'#component1'
    });
</script>

方法2：在Vue根实例中调用

<div id="component1">
</div>

<script>
    Vue.component('firstComponent',{
        template: '<h2>Hello,component!</h2>'
    });
    new Vue({
        el:'#component1'，

template:'<firstComponent></firstComponent>'
});
</script>