App.vue
<template>
<div>
<school></school>
<hr>
<student></student>
</div>
</template>
<script>
import Vue from 'vue'
const school = Vue.extend({
//配置组件使用的模板,需要用一个div套在外面,确保只有一个根元素。
//这里就封装了组件的html。
template:`
<div>
<div>学校:{{schoolName}}</div>
<div>地址:{{schoolAddress}}</div>
</div>
`,
//配置数据
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
});
const student = Vue.extend({
template:`
<div>
<div>学生:{{studentName}}</div>
<div>年龄:{{studentAge}}</div>
</div>
`,
data() {
return {
studentName:"张三",
studentAge:18
}
},
});
export default {
name: "App",
components:{
school,
student
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')