extend省略

 // 第一步：创建good组件
    const good = Vue.extend({
      template:`<div>
        <h1>good</h1>
      </div>`,
    })
    // 简写模式: Vue.extend 可以写成一个对象，省略掉extend
    //   // 第一步：创建good组件
    //   const good = {
    //   template:`<div>
    //     <h1>good</h1>
    //   </div>`,
    // }

组件name配置项是开发者工具显示的结果

  <div id="root">
    <!-- 组件名 -->
    <x></x>
    <!-- 可以复用 -->
    <x></x>
    <br>
    <student></student>
    <good></good>
  </div>
  <script>
    //第一步：创建shool组件
    const shool = Vue.extend({
      // el:'#root',// 组件定义时，不用写el这个配置，因为最后它都被一个vm管理，由vm决定服务哪个容器
      template:`<div>
      <h1>名称：{{shoolName}}</h1>
      <h1>地址：{{addr}}</h1>
    </div>`,//一定只有一个根元素包裹，这是组件的HTML结构，用template配置
      data(){ //data有对象式和函数式，组件式必须要用函数式，不然报错
        return { //函数式是为了可以复用，每次都返回一全新的对象，被修改也不会影响到复用的对象
         shoolName:'小学',
         addr:'上海'
        }
      }
    })
    // 第一步：创建student组件
    const student = Vue.extend({
      name:'hhhhhhhhhhhh',//这个名字决定在开发者工具显示的名字
      template:`<div>
      <h1>姓名：{{studentName}}</h1>
      <h1 @click="年龄加1">年龄：{{age}}</h1>
      </div>`,
      data(){
        return {
          studentName:'高高',
          age:17
        }
      }
    })
    // 第一步：创建good组件
    const good = Vue.extend({
      template:`<div>
        <h1>good</h1>
      </div>`,
    })
    // 简写模式: Vue.extend 可以写成一个对象，省略掉extend
    //   // 第一步：创建good组件
    //   const good = {
    //   template:`<div>
    //     <h1>good</h1>
    //   </div>`,
    // }
    //全局配置组件
    Vue.component('good',good)
    new Vue({
      el:'#root',//组件要服务的容器
      //局部定义组件
      components:{//一个键值的方式表示
        x:shool,//shool表示用的是哪个组件，但是在上面的HTML用的是x这个键名，键名不能用大小，除非用脚手架
       student//如果键名一致就用简写模式
      }
    })
  </script>