一、组件化编程

1. 对比传统编写与组件化编程（下面两个解释图对比可以直观了解）

2. 组件化编程区分 

3. 非单文件组件的引出 

  <div id="root">
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{addrss}}</h2>
      <hr />
      <h2>学生名称：{{studentName}}</h2>
      <h2>学生年龄：{{age}}</h2>
  </div>
//vue数据
 const vm = new Vue({
      el: "#root",
      data: {
        schoolName: "清华",
        addrss: "北京",
        studentName: "李华",
        age: "18",
      },
  });

 4. 单文件组件的使用

 5. 单文件组建的注意点

 6. 组件的嵌套

7. Vue.Component(组件实例化)

 8. 重要的内置关系

 9. 单文件组件方式：.vue后缀

<template>
  <div class="demo">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      schoolName: "清华",
      address: "北京",
    };
  },
  methods: {
    showName() {
      alert(this.schoolName);
      console.log(this); //指向当前组件
    },
  },
};
</script>

<style>
.demo {
  background-color: pink;
}
</style>

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 先引入组件
import School from './School.vue'
import Student from './Student.vue'
// 再进行对外暴露并注册组件
export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

<style>
</style>