Vue单文件组件

什么是单文件组件？

        单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

        并且还可以使用 webpack 或 Browserify 等构建工具。

单文件组件的好处

        在 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

示例：这是一个名为demo.vue的单文件组件

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

在文件中我们可以看到 在<template></template>中定义组件的结构，在<script></script>标签里面写配置项，在<style></style>标签中写样式  

一个.vue文件就是一组件 维护简单方便 文件内容条理清晰