vue的元件也是需要註冊後才可以使用的，註冊有全域性註冊和區域性註冊兩種；

全域性元件註冊後，任何vue例項都可以用：

<div id="v1">
    <first-component></first-component>
</div>


<script src="vue.min.js"></script>

<script>
                 //first-component就是元件中自定義的標籤名，一般用小寫或者加- 比較多一點
    Vue.component('first-component'
 
,{
                    //這裡必須是被一個元素包含的內容，否則無法渲染
        template:"<div>第一個元件的內容</div>"
    });

    var v1=new Vue({
        el:"#v1"
    });

</script> 

效果圖：

區域性元件註冊後，只有在設定對應的例項內才可以使用，也可以使用components選項來註冊元件，使元件巢狀

<div id="v1">
    <v-com></v-com>
</div>
 


<script src="vue.min.js"></script>
<script>
    var comEle={
        template:"<h2>區域性元件TEXT</h2>"
    };

    var app=new Vue({
        el:'#v1',
        components:{
            'v-com':comEle
        }
    })
</script>

顯示效果：

需要注意的是，元件模板有時會受到HTML的限制，比如< table >標籤內只能放< tr >< td >等，或者ul、ol 、select 、等
這種情況下可以使用特殊的 is

<div id="v1">
    <table>
        <tbody is="v-com"></tbody>
    </table>
</div>
<script src="vue.min.js"></script>
<script>
    var comEle={
        template:"<h3>特殊元件TEXT</h3>"
    };

    var app=new Vue({
        el:'#v1',
        components:{
            'v-com':comEle
        }
    })
</script>

顯示效果：

建立元件時，除了template選項,也可以使用像例項中的其他選項，比如data, computed, methods等，這裡需要注意是data的用法：
data必須是函式，通過return的方式傳遞資料：

<div id="v1">
    <v-com></v-com>
</div>

<script src="vue.min.js"></script>

<script>
    Vue.component('v-com',{
        template:"<h3> {{ content }} </h3>",
        data:function () {
            return{
                content:"data元件內容"
            }
        }
    });

    var app=new Vue({
        el:'#v1'
    })
</script>

效果圖：