vue基础六：vue组件化编程基础，关键字：extend、components、template

1. 组件一句话定义

组件的定义：
	1.实现应用中局部功能代码和资源的集合

2. vue组件化编程：基本类型

1.非单文件组件
	一个文件中包含多的组件，提供给其他文件调用
2.单文件组件（常用）
	一个文件中仅包含一个组件

3. vue中组件从创建到使用

			一、定义组件（创建组件）
			二、注册组件
			三、使用组件（写组件标签）

3.1 如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但区别如下：
	1.el不用写---最终所有的组件都需要经过vm对象管理，由vm中的el决定组件服务那个容器
	2.data必须写成函数式---避免组件被服用时，数据存在引用关系
备注：template可以配置组件结构

//第一步：创建school组件
const school = Vue.extend({
	template:`
		<div>
			<h3>学校名称：{{schoolname}}</h3>
			<h3>学校地址：{{address}}</h3>
		</div>`,
	data:function(){
		return{
			schoolname:'北京大学',
			address:"中国北京"
		}
	}

})

3.2 如何注册组件？

1.局部注册（使用多）：靠new Vue()的时候传入components选项
2.全局注册：靠Vue.component('组件将被使用的名称'，组件创建时的名称)

const vm = new Vue({
//第二步:注册组件(局部注册)components
	components:{
		school:school,
		student:student
	}	
})
vm.$mount("#app")

//全局注册
Vue.component('sch',school)

3.3 如何使用组件？：组件标签

			<!-- 第三步：组件使用 -->
			<school></school>
			<hr >
			<student></student>

4 .组件命名规范

几个注意点：
	1.关于组件名：
		一个单词组成：
			第一种写法（首字母小写）：school
			第二种写法（首字母大写）：School
		多个单词组成：
			第一种写法（kebab-case命名）：my-school
			第二种写法（CameCase命名）：MySchool(需要Vue脚手架支持)
		备注：
			（1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
			（2）可以使用name配置项指定组件在开发者工具中呈现的名字
	2.关于组件标签：
		第一种写法：<school></school>
		第二种写法：<school/>
		备注：不使用Vue脚手架时，<school/>会导致后续组件不能渲染
	3.一个简写方式：
		const school = Vue.extend(options)可简写为：const shcool = options