基於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>這裡是另外一個模板測試</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>