SOURCE

// 全局组件：可以在任意Vue控制的模板中使用
Vue.component('my',{
   template:"<div>888</div>",
//data必须写成函数形式
  data:function(){
    
  }
})
// 两个参数（组件名,对象{元素}））
// new Vue({
//   el:'.test',
//   data:{
//     name:'luna'
//   },
//   // template:"<div>{{name}}</div>"
//   // template:"<div>{{name}}</div><div>123</div>"
//   template:"<div>{{name}}<div>123</div></div>"
// })
new Vue({
  el:'#app',
  data:{
    name:'lisa'
  },
//局部组件，可以在该Vue下使用
  components:{
    'mys':{
      template:"<div>666</div>"
    }
  }
})
new Vue({
  el:'#app2',
  template:"<my></my>"
//   template 模板也是Vue实例控制的模板
})
// Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!--   <div class='test'></div>
  <div class='test'></div>
  <div class='test'></div>
  <div class='test'></div>
  <div class='test'></div> -->
  <!--组件可以复用：-->
  <my></my>
  <my></my>
  <my></my>
  <mys></mys>
</div>
<!--使用template希望实现将所有class为“test”的dom元素替换成template中的内容。但是却只能出来一个template元素内容；
原因：Vue实例的特点，当控制一段元素时，只会控制第一个找到的class为“test”的div更改；
Vue中组件化开发的方法：component();
-->
<div id="app2"></div>

/* 
1、使用template模板：会覆盖原html内容。此时‘111’不会显示；只显示template中的内容；
2、当template中（紧挨着template）有多个同级下级标签；只显示第一个标签；只显示“Luna”，不显示“111”和“123”；
   原因是：要求template中必须有一个根元素（将其他元素都包裹在内）；
*/