vue-vue2核心9-组件化编程-单文件组件
单文件组件
在创建vue文件时,要在vscode里面下载插件 vetur
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f66fac4d581da8da2feadd85c8883d64.png)
单文件结构分类为
<template>
</template>
<script>
export default {
setup() {
},
}
</script>
<style>
</style>
创建school文件
<template>
<div class="demo">
<h2>名称:{{name}}</h2>
<h2>地址:{{address}}</h2>
<button @click="showName">点我提示科技中心</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'瓦坎达',
address:'非洲'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
APP 汇总文件
<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>
main.js
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})
页面引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>练习一下单文件组件的语法</title>
</head>
<body>
<div id="root"></div>
</body>
</html>