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