非单文件组件

Vue中使用组件的三大步骤

          一、定义组件（创建组件）

          二、注册组件

          三、使用组件（写组件标签）

        一、如何定义一个组件？

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

            区别如下：

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

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

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

        二、如何注册组件？

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

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

        三、编写组件标签

            <school></school>

几个注意点：

          1、关于组件名：

              一个单词组成：

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

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

              多个单词组成：

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

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

              备注：

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

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

          2、关于组件标签：

                  第一种写法：<school></school>

                  第二种写法：<school/>

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

          3、一个简写方式：

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