元件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重複的，而且很多不同的頁面之間，也存在同樣的功能。

而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css宣告功能的外觀樣式，還要使用js來定義功能的特效，因此就產生了把一個功能相關的[HTML、css和javascript]程式碼封裝在一起組成一個整體的程式碼塊封裝模式，我們稱之為“元件”。

所以，元件就是一個html網頁中的功能，一般就是一個標籤，標籤中有自己的html內容結構，css樣式和js特效。

這樣，前端人員就可以在元件化開發時，只需要書寫一次程式碼，隨處引入即可使用。

vue的元件有兩種：預設元件[全域性元件] 和 單檔案元件。我們在這裡先講一下預設元件。

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

<script>
    Vue.component("addnum",{
        template:'<div><input type="text" v-model="num"><button @click="num+=1">點選</button></div>',
        data: function(){
            // 寫在這裡的資料只有當前元件可以使用
            return {
                num:1,
            }
        }
    });

    var vm = new Vue({
        el:"#app",
        // 這裡寫的資料是全域性公用的，整個檔案共享
        data:{

        }
    })
</script>