<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)
      }
    }
  }

// const school = Vue.extend({
//   data() {
//     return {
//       schoolName: '尚硅谷',
//       address: '北京'
//     }
//   },
//   methods: {
//     showName(){
//       alert(this.schoolName)
//     }
//   }
// })
// 默认暴露
// export default school
</script>

<!--  组件的样式标签  -->
<style>
.demo {
  background-color: orange;
}
</style>