恭喜你！到此為止終于走出了新手村，可以做日常活動了。那么今日我們將進入的是名為組件的島嶼，它位于Vue大陸，緊貼繁華區(qū)。

說到組件，第一想到的應該是component這個單詞，緊接著仔細想想什么是組件？好比一臺機器，有好多個零件，每個零件都有自己的分工，同時呢，這種零件在另一臺機器上也同樣適用，說白了像java一樣，一次編譯到處運行。

要注意的是，你得先有一個Vue對象，然后你寫的組件呢，都在Vue掛載的元素內(nèi)寫才有效

// 2.創(chuàng)建組件對象

//es6里改成``指代字符串并自帶換行效果
const my=Vue.extend({
?template:`
? <div>
? ?<p>我是個組件</p>
? </div>`
})
//3.注冊組件
Vue.component('cpn-x',my)//兩個參數(shù)，第一個是你定義的標簽名，第二個是組件對象

//1.創(chuàng)建Vue對象，并掛載到指定元素上
const app=new Vue({
? ? el:document.querySelector('#app'),
? ? data:{
? ? ? ? message:'hello world',
? ? ? ? movies:['海賊','火影'],
? ? ? ? counter:0
? ? },
? ? methods:{

? ? }
})

//4.組件的使用

<div id="app"><cpn-x></cpn-x></div>