目標：
　　能夠知道元件化開發思想
　　能夠知道元件的註冊方式
　　能夠說出元件間的資料互動方式
　　能夠說出元件插槽的用法
　　能夠說出Vue調式工具的用法
　　能夠基於元件的方式實現業務功能
目錄：
　　元件化開發思想
　　元件註冊
　　Vue除錯工具用法
　　元件間資料互動
　　元件插槽
　　基於元件的案例

1、元件化開發思想
把不同的功能封裝到不同的元件中，元件可以通過組合的方式形成完整意義上的應用。

2、元件註冊
全域性元件註冊語法：

Vue.component(元件名稱,{
    data:元件資料,
    template:元件模板內容
})

　　定義一個名為button-counter的新元件

Vue.component('button-counter',{
    data:function(){
        return {
            count:0
        }
    },
    template:'<button v-on:click="count++">點選了{{count}}次</button>'
})

元件用法：

<div id="app">
    <button-counter></button-counter>
</div>
//可以多次使用，每個元件之間互不影響
<
 
div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

元件註冊注意事項：
　　data必須是一個函式
　　元件模板內容必須是單個根元素
　　元件模板內容可以是模板字串
　　元件命名方式：
　　　　短橫線方法
　　　　　　Vue.component('my-component',{/*...*/})

　　　　　　必須使用短橫線的方式使用元件。
區域性元件註冊：

var ComponentA = { /*...*/ }
var ComponentB = { /*...*/ }
var ComponentC = { /*...*/ }
new Vue({
    el:'#app',
    components：{
        'component-a':ComponentA,
        'component-b':ComponentB,
        'component-c':ComponentC,
    }
})