1、School.vue
<template><h1>{{schoolName}}</h1><h2>{{address}}</h2><button @click="showname">点我提示学校名</button>
</template>
<!---->
<script>export default {name: "School",data(){return{schoolName:'清华大学',address:'北京',}},methods:{showname(){alert(this.schoolName)}}}
</script><style scoped></style>
2、Student.vue
<template><h2>{{name}}</h2><h2>{{age}}</h2>
</template><script>export default {name: "Student",data(){return{name:'凡妹妹',age:'18',}},}
</script><style scoped></style>
3、App.vue
<template><div><School></School><student></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>
4、main.js
import App from './App.vue'
new Vue({el:'#root',components:{App}
});
5、index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单文件组件语法</title>
</head>
<body><div id="root"><App></App></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="main.js"></script>
</body>
</html>
