//定义一个名为 button-counter 的新组件
Script:
    Vue.component('button-counter',{//button-counter  这个是组件的名字
        data:function(){
            return{
                count:0
            }
        },
        template:'<button v-on:click="count++">单击  {{ count }}</button>'
    })

组件是可复用的Vue 实例，并且有一个名字：
我们可以在一个通过 new Vue 创建的Vue根实例中，
把这个组件作为  自定义元素(自己定义的标签 这样来理解)  来使用：
Html:
    <div id="components-demo">
        <button-counter></button-counter>
    </div>

Script:
    new  Vue({ el: '#components-demo' })//指定挂载位置
    new 了一个Vue 实例

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

自己的理解：因为组件是可复用的 Vue 实例
    就是一个特殊的Vue实例，而这个实例 和new vue区别在 组件是可以复用的。
    而且他还可以接收 data /computed/watch/methods 等选项

    component(组件) 的复用

    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-cunter>
        <button-counter></button-counter>
    </div>

    注意：当单击按钮时，每个组件都会给自独立维护它的 count 。
        因为你每用一次组件，就会有一个它的新实例被创建

        理解：这里的每用一次 是 单击一次还是 <button-counter></button-counter>标签被使用一次
             作用域不同
             复用不仅仅是代码上的复用 更是功能的复用，而且每次复用都是一个新的实例

data 必须是一个函数
    当我们定义<button-counter>组件时，你可能会发现他的data并不是像这样直接提供一个对象

    data:{
        count:0
    }

    而是：
    Vue.components('button-counter',{
        tempalte:'<p>我是一个组件是一个模板，这个是我自己的理解</p>',
        data:function(){
            return {
                count:0
            }
        }
    })

    一个组件的data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立拷贝

    自己理解 条件 ：    一个组件假如有data选项此选项必须是一个函数
                    也必须还有一个templtae选项
                    每个名字映射着一份且在内存中独立区域，彼此之前不存在数据的交换

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。

全局组件注册方式：Vue.component(组件名,{方法})

组件的组织
     通常一个应用会一一颗嵌套的组件树的形式来组织
    例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的

    注册类型：全局注册
             局部注册。
    至此，我们的组件都只是通过 ：
        Vue.component 全局注册的：
            Vue.component('my-conponent-name',{
                //。。。options....
            })

注意 1:
    全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例，也包括其组件树种的索引子组件的
    模板中。

    全局组件必须写在new Vue()创建之间，才在该根元素下面生效。
    <body>
        <div id='app'>

            <my-component></my-component>

        </div>

        <div id='app-1'>

            <my-component></my-component>
        </div>
    </body>

    <scirpt>
        Vue.component('my-component',{
            template:"<h1>我是全局组件,{{ msg }}</h1>"，
            data(){
                return{
                    msg:'有时候努力不一定会有回报，但是还是有一丝丝的可能的。'
                }
            }
        })

        new Vue({
            el:'#app'//申明挂载点
        });

        new Vue({
            el:'#app-1'
        })

    </scirpt>

渲染效果：
    <div id="app">
        <h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
    </div>

    <div id="app-1">
        <h1>我是全局组件，有时候努力不一定会有回报，但是还是有一丝丝的可能的。</h1>
    </div>

注意 2：

    模板里面第一级 只能有一个标签，不能并行

    Vue.component("my-component",{
        template:"<h1>我是全局组件</h1>" +
        "<p>我是全局组件内标签</p>"
    });
    //因为这里h1 和 p 标签在同一级别里面了
    所以会报错

    修改如下：
    Vue.component("my-component",{
        template:"<h1>我是全局组件<p>" +
        "我是全局组件内标签</p></h1>"
    });

 局部注册方式：
     直接在Vue实例里面注册

     <body>
         <div id='app1'>
             <child-component></child-component>
         </div>

     <script>
         new Vue({
             el:'#app1',
             components:{
                 "child-component":{
                     template:'<h1>我是局部组件</h1>'
                 }
             }
         });

         //这样行不行
         new Vue({//这是 实例化一个 根实例
             el:'#app1', //这个也是属性  这个属性是用来 确定 挂载点的
             components:{//这是属性  这个属性是用来注册组件的
                 "child-component":template:'<p>这样估计不行</p>'
             }

         });
     </script>

     注意：
         在Vue 直接定义组件时
         属性components  是复数形式:(自己理解，组件的数量不确定吗)

         多组件定义时 应该如下：

          <body>
              <div id='app1'>
                  <child-component-2></child-component-2>
                  <child-component-1></child-component-1>
              </div>

              <script>
                  var child1={
                      template:'我是一个局部组件'
                  };

                  var child2={
                      templae:'<h1>我也是一个局部组件，你咬我啊！</h1>'
                  };

                  new Vue({
                      el:'#app1',
                      components:{
                          "child-component-1":child1,
                          "child-component-2":child2
                      }

                  });

              </scirpt>
          </body>

 自定义局部组件：另外一种情况
       其它属性可以和实例中一样，但是data属性必须是一个函数：
      <body>
          <div id="app1">
              <child-component></chidl-component>
          </div>
          <scirpt>
              var child={
                  teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
                  data:function(){
                      return {
                          msg:'世界很美，要懂得发现美好！',
                          count:1
                      }
                  },
                  methods:{
                      add2：function(){
                          this.count++
                      }
                  }
              };

              //可不可以这样写：
               var child={
                  teamplate:'<button @click="add2">我是局部组件，我传递了一个消息:{{ msg }},次数:{{ count }}</button>',
                  data(){
                      return {
                          msg:'世界很美，要懂得发现美好！',
                          count:1
                      }
                  },
                  methods:{
                      add2：function(){
                          this.count++
                      }
                  }
              };

              new Vue({
                  el:'#app1',
                  components:{//注册局部组件并且给它取了一个名字 child-components 这个名字是用在html中的，说白了 就是自定义了一个html 标签而已。
                      "child-components":child
                  }

              });

          </scirpt>
      </body>