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>