Vue单文件组件

SchoolCom.vue

<template>
    <div class="demo">
        <h1>学校名字:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
        <button @click="showName">点击我显示学校名字</button>
    </div>
</template>

<script>
export default {
    name: "SchoolCom",
    data: function(){
        return {
            name: "深圳大学",
            address:"深圳"
        }
    },
    methods:{
        showName: function(){
            alert(this.name)
        }
    }
}
</script>

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

StudentCom.vue

<template>
    <div>
        <h1>学生名字:{{name}}</h1>
        <h1>学生年龄:{{age}}</h1>
    </div>
</template>

<script>
export default {
    name: "StudentCom",
    data: function(){
        return {
            name: "张三",
            age: 18
        }
    }
}
</script>

App.vue

<template>
    <div>
         <img src="./assets/logo.png"/>
         <SchoolCom></SchoolCom>
         <StudentCom></StudentCom>
    </div>
</template>

<script>
import SchoolCom from "./components/SchoolCom"
import StudentCom from "./components/StudentCom"

export default {
    name: "App",
    components:{
        SchoolCom: SchoolCom,
        StudentCom: StudentCom
    }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')


/*
new Vue({
  el: "#app",
  template: "<App></App>",
  components:{
    App: App
  }
})*/