单文件组件
将不同的组件html文件，js文件分为不同的独立文件
并进行import引入
School.vue
<template>
<!--组件的结构-->
<div class="demo">
<h2>名称：{{schoolName}}</h2>
<h2>地址：{{address}}</h2>
</div>
</template>
<script>
//组件交互相关的代码
export default{
name:'School',
data(){
return{
schoolName:'中南大学',
address:'changsha',
}
},
}
</script>
<style>
/*组件的样式*/
.demo{
background-color: orange;
}
</style>
分为组件的结构，组建的交互，组件的样式
Student.vue
<template>
<!--组件的结构-->
<div class="demo">
<h2>学生姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
//组件交互相关的代码
export default{
name:'Student',
data(){
return{
name:'gugu',
age:22
}
},
}
</script>
<style>
/*组件的样式*/
.demo{
background-color: orange;
}
</style>
App.vue
汇总组件
<template>
<div>
<School></School>
<Student/>
</div>
</template>
<script>
//引入组件
import School from "./School.vue";
import Student from "./Student.vue";
export default {
name: "App",
components:{
School,
Student
}
}
</script>
<style scoped>
</style>
main.js
注册app
import App from "./App";
new Vue({
el:'#root',
components:{App},
})
index.html
<body>
<div id="root">
<App></App>
</div>
<script type="text/babel" src="../js/vue.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
标签：文件,School,vue,name,App,day72,Student,组件 From： https://www.cnblogs.com/GUGUZIZI/p/17112497.html