非单文件组件

基本使用

1.创建组件
2.注册组件（全局组件、局部组件）

注意:
1.关于组件名
一个单词组成
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）: my-school
第二种写法（CamelCase命名）: MySchool
备注：
（1）组件名尽可能回避html 中已有的元素名称。例如：H2 h2都不行
（2）可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
第一种写法：
第二种写法:
备注：不用 使用脚手架时，会导致后续的组件不能渲染

    3.一个简写方式
       const school=  Vue.extend(options) 可简写为 const school= options

组件嵌套

 // 第一步：创建student组件
      const student = Vue.extend({
        name: 'student',
        template: `
      

        
学生姓名:{{studentName}}
        
年龄:{{age}}
      
      `,
        data() {
          return {
            studentName: '清华大学',
            age: 18
          }
        }
      })

    // 第一步：创建school组件
    const school =  Vue.extend({
      name: 'school',
      template:`
      

        
学校名称:{{schoolName}}
        
学校地址:{{address}}
         
      
      `,
      data(){
        return {
          schoolName:'清华大学',
          address:'北京'
        }
      },
      components: {
        student
      }
    })

// 定义app组件
  const app = Vue.extend({
    name: 'app',
    template: `
      

        
         
      
      `,
    components: {
      school,
    }
  })

 const vm = new Vue({
      el: "#root",
       template: `
      
      `,
      // 第二步：注册组件（局部注册）
      components:{
        app
      }
    })

VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写或，Vue解析时会帮助我们创建school组件的实例对象
即Vue帮我们执行的：new VueComponent(options)
3.特别注意：每次调用Vue.extend。返回的都是一个个全新的VueComponent！！！
4.关于this指向：
（1）组件配置中：
data函数表、methods中的函数、watch中的函数、computed中的函数，他们的this都是【VueComponent实例对象】
（2）new Vue()配置中：
data函数表、methods中的函数、watch中的函数、computed中的函数，他们的this都是【Vue实例对象】
5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)
Vue的实例 对象，以后简称为vm