vue component为什么官网的自定义组件不显示及各种自定义组件写法？

基于Vue2的官网。

官网这样写的不显示：因为你还没有一个vue实例对象，也就是主模板，也没有挂载到文档中。因为没有新建Vue对象，浏览器并不会自动识别Vue对象里有的方法，所以要new一个。el就是相当于Js中的element

<ol id="todoItem1">
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
<ol id="todoItem">
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
<script>
//定义todo-item组件
Vue.component('todo-item', {
template: '<li>这是个待办事项</li>'
});

//定义模板后，必须实例化，不然是不显示的。
var vm = new Vue({
el: '#todoItem1'
});
new Vue({
el: '#todoItem'
});
</script>

二：下面的写法也是可以的

<div id='app21'>

             <v-header></v-header>

        </div>

        <script type="text/javascript">

            Vue.component('vHeader', {

                template: '<div>A custom component!</div>'

            });

            new Vue({

                el:'#app21',

            });

        </script>

三：另外一种写法

<div id="component1">
<h1>
4000
;这里是另外一个模板测试</h1>
<global-component></global-component>   <!-- 这里也插入了这个组件，全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用 -->
</div>
<div id="component2">
<h1>这里是模板测试</h1>
<global-component></global-component>  <!-- 使用自定义标签在 Vue.js 模板中插入组件，编译时，这部分内容会被替换为组件的内容 -->
</div>

<template id="global-template">  <!-- 此 DOM 元素的 innerHTML 作为全局注册组件的模板 -->
<div>
组件内部 msg 文本内容为 {{msg}}，和父组件无关！不信改改看：<!-- 和普通 Vue.js 模板一样，可以进行插值 -->
<input type="text" v-model="msg" />  <!-- 和普通 Vue.js 模板一样，也可以进行表单数据绑定 -->
</div>
</template>
<script type="text/javascript">
Vue.component("global-component",{ //使用语法糖（只使用扩展实例选项）全局注册组件
data: function(){ //Vue 扩展实例构造器的 data 选项，必须是一个工厂函数，返回数据对象
return {
msg: 'Hi, Vue.js'
}
},
template: "#global-template"  //template 是模板，可以是包含 HTML 代码的字符串，也可以是 # + id，如果是 # + id，则会使用该选择子匹配的 DOM 元素的 innerHTML 作为模板
});
new Vue({
el: "#component1"
});
new Vue({
el: "#component2"
});
</script>