Vue的单文件组件和非单文件组件

单文件组件：一个文件中只包含一个组件，后缀为.vue（常用）

<template>
	<!-- html部分 -->
	<div>
		<p class="title">{{name}}</p>
	</div>
</template>
<script>
	// js部分
	export default {
		data() {
			return {
				title: '这是标题'
			}
		}
	}
</script>
<style>
	/*css部分*/
	.title {
		font-size: 24px;
		color: orange;
	}
</style>

非单文件组件：一个文件中包含有多个组件，后缀为.html

1. 在非单文件组件中“定义、注册、使用”组件
   【下例中将header-com注册为局部组件、footer-com注册为全局组件】

   <div id="root">
   	<!-- 使用局部组件 -->
   	<header-com></header-com>
   	<!-- 使用全局组件 -->
   	<footer-com></footer-com>
   </div>
   

   // 定义组件
   const header = Vue.extend({
   	template: `
   		<div id="header-container">
   			{{title}}
   		</div>
   	`,
   	data() {
   		return {
   			title: '这是标题'
   		}
   	}
   });
   // 定义组件
   const footer = Vue.extend({
   	template: `
   		<div id="footer-container">
   			{{title}}
   		</div>
   	`,
   	data() {
   		return {
   			title: '这是底部'
   		}
   	}
   });
   // 注册全局组件
   Vue.component('footer-com', footer);
   new Vue({
   	el: '#root',
   	// 注册局部组件
   	components: {
   		'header-com': header
   	}
   });
   

2. 注意事项
   ① 组件中不能添加el配置项，只需在根vm中配置，因为所有的组件最终都被一个vm管理（vue只有一个老大）
   ② 组件中使用name配置项修改组件在开发者工具中展示的名字
   ③ 组件实际是一个VueComponent构造函数，在每次使用组件的时候都会实例化一个组件对象。
   ④ 重要的内置关系：VueComponent.prototype.proto === Vue.prototype，目的是让组件能访问到根vm上的属性和方法。