页面可以划分成很多部分。往往不同的页面，也会有相 同的部分。 例如可能会有相同的头部导航。 但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面 的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。 在vue里，所有的vue实例都是组件

    组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等

    不同的是组件不会与页面的元素綁定，否则就无法复用了，因此没有el属性。 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组了 data必须是一个函数，不再是一个对象。

    1. <body>
    2.     <div id="app">
    3.         <button v-on:click="count++">我被点击了 {{count}} 次</button>
    5.         <counter></counter>
    6.         <counter></counter>
    7.         <counter></counter>
    8.         <counter></counter>
    9.         <counter></counter>
    11.         <button-counter></button-counter>
    12.     </div>
    13.     <script src="../node_modules/vue/dist/vue.js"></script>
    16.     <script>
    17.         //1、全局声明注册一个组件
    18.         Vue.component("counter", {
    19.             template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
    20.             data() {
    21.                 return {
    22.                     count: 1
    23.                 }
    24.             }
    25.         });
    27.         //2、局部声明一个组件
    28.         const buttonCounter = {
    29.             template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
    30.             data() {
    31.                 return {
    32.                     count: 1
    33.                 }
    34.             }
    35.         };
    37.         new Vue({
    38.             el: "#app",
    39.             data: {
    40.                 count: 1
    41.             },
    42.             components: {
    43.                 'button-counter': buttonCounter
    44.             }
    45.         })
    46.     </script>
    47. </body>