vue基础篇 - 单文件组件

「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」。

上一篇简单的和大家介绍了vue中非单文件组件的内容，本期我会说一下vue中单文件组件的内容，关于非单文件组件的内容大家已经了解了不少了，今天的单文件组件就是把原来的组件拆开成一个一个的文件，单文件的组件是也.vue结尾的文件，当然浏览器是没有办法读这些文件的，我们需要处理转换才可以显示，当然我们可以用vue的脚手架的内容转换，当然这篇不是关于脚手架的，所以我会在下一篇进行讲解，这一篇我会和大家讲讲vue的组件内容，我会以一个学校内容的案例来举例：

先把组件准备好：School.vue Student.vue文件以.vue的结尾的文件，先回顾一下组件是什么：组件是实现界面局部功能代码和资源的集合的代码叫组件，所以一个标准的组件也是有html，css，js三个部分的内容所以vue给了三个标签来放这些内容：template标签写html的代码 script标签写js的脚本函数这些 style标签也就是css内容

先是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:'VUE',
				address:'互联网'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

Student.vue组件：这个组件我主要是吧展示学生的信息

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

组件是需要导出的一般我们是现在export default xxx来使用导出，别人就可以引用我们这个组件代码； 当我们组件已经准备好了，现在开始引用组件，通过import的方式引入组件

<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>

通过引用组件来实现我们想要的效果，当然我们现在是无法看到效果的，要配合脚手架来使用，使用我会在下一篇进行代码的演示；