Vue单文件组件

Vue中的单组件是由以.vue为后缀的文件组成的。
使用组件主要是因为组件的复用性很高，哪里需要往哪搬。
每个单文件组件由三部分组成：template、script、style
template标签中写该组件所呈现的结构模板，即想要在网页显示的html结构写在template标签中。

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

比如上面的代码就是显示学校相关信息的结构。
script标签中写之前写在Vue结构中的代码，比如data、methods等。

 export default {
		name:'School',
		data(){
			return {
				name:'XXX',
				address:'someplace'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}

注意要将这部分代码导出，此处使用的是es6的默认导出，其中name是定义该组件的名称，data即之前html中会用到插值语法的数据，不过这里data应写为函数形式，return其中的内容。methods中写了一个showName方法来提示学校名称。
style标签中写相对应的样式，没有的话也可以不写。
将上面的部分完成就写好了一个单文件组件了。在实际开发中我们肯定不止写一个组件，我们还要有一个App.vue文件来引入所有的组件，将它们汇总。在template标签中把各组件名称标签引用好。 不过当我们想在html文件中引入组件时，需要引入main.js文件，也就是说我们需要创建main.js文件，然后在其中将App.vue组件引入，将组件注册好。