一、非单文件组件

Vue中使用组件的三大步骤：

1.定义组件(创建组件)

2.注册组件

3.使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

三、编写组件标签：

<组件名></组件名>

四、几个注意点：

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法：<组件名></组件名>

第二种写法：<组件名/>

备注：不用使用脚手架时，<组件名/>会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

4.Vue脚手架main.js里面的render函数

因为main.js默认引入的vue.js是压缩版的，里面没有模板解析器，所以需要用render函数将解析好的模板显示出来

关于不同版本的Vue：

1.vue.js和vue.runtime.xxx.jsd的区别：

(1)vue.js是完整版的vue，包含：核心功能+模板解析器。

(2)vue.runtime.xxx.js是运行版的vue，只包含：核心功能；没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。