vue组件创建、私有组件

 注意：无论哪种定义方式，组件的要标签只能有1个，多余的不会显示也不报错，默认显示第一个标签

vue创建组件的三种方式：

第一种：

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

<script>
  var com1 = Vue.extend({
    template: '<div>com1 组件</div>'
  });
  Vue.component('com1', com1);
  new Vue({
    el: '#app',
  });
  </script>

第二种：

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


  <script>
    Vue.component('com1', Vue.extend({
      template: '<h1>com1组件</h1>'
    }));
    //或者
    // Vue.component('com1', {
    //   template: '<h1>com1组件</h1>'
    // });
    new Vue({
      el: '#app',
    });
  </script>

第三种：

<div id="app">
    <com1></com1>
  </div>
<template id="tpl">
  <div><h1>使用template元素创建的组件</h1></div>
</template>

  <script>
    Vue.component('com1', {
      template: '#tpl'
    });
    new Vue({
      el: '#app',
    });
  </script>

定义私有组件：

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


  <script>
    new Vue({
      el: '#app',
      components: {
        com2:{
          template: '<h2>这是私有组件</h2>'
        }
      }
    });
  </script>