非单文件组件

定义组件时： let home = Vue.extend(配置项)
配置项和new VUe 基本类似 可以有 data computed template 。。。。。。
和 new Vue() 区别：
1. el 不要写
2. data 要写成一个函数 形式 因为每次使用组件都是返回独立的数据
3. 用 template 配置模板 注意只能有一个根元素

    注册:   
       1. 局部注册
         在 new Vue() 中添加 配置项 components:{ haha:home }   一般键和值是一样的
           
       2. 全局注册
          Vue.component("home",home)  在多个容器中都可以使用

    使用 :在 root 中
           

关于组件名称:
1. 一个单词 home 或者 Home 模板中用
1.1 开发者工具显示的会将 开头字母大写 所以建议大家用 Home
1.2 在脚手架中一般写 但是只解析第一个 脚手架中正常
2. 多个单词 myschool 使用连字符或大驼峰 在调试工具都是显示 大驼峰
2.1 MyShool 在脚手架中可以使用
2.2 my-shool 可以使用连字符 注意双引号

组件定义的简写形式 了解一下
1. 省略 Vue.extend 直接 写 {} 配置项 局部和全局定义都可以省略
底层使用的还是 Vue.extend api
2. 使用script 标签 让模板提示
2.1 全局
Vue.component("组件名",{
template:"#id名" // 使用的模板是script标签中的内容
})
2.2 局部
let 组件名 = {
template:"#id名"// 使用的模板是script标签中的内容
}
在new Vue() 中 注册一下即可
3. 在new Vue() 直接写
test:{
template:"

test{{msg}}

",
data(){
return {
msg:"提示一下"
}
}
}

     注意: 组件有一个name 属性配置项 可以指定 组件的名称  在调试工具中
          显示 name  指定的名称      

       组件嵌套：  也是三步
        1. 定义一个组件  
        2. 注册  在 School组件中 注册
        3. 使用  在 School组件的模板中使用
    

     一些注意点: 
        组件中的this 指向 VueComponent 对象实例 简称vc
         new Vue 中this 指向 vm实例

     内置关系： 所有的vc 是VueComponent 构造函数 创建出来的
                

            vc 可以使用vue 原型上的 属性和方法 比如 生命周期函数 计算属性。。。。
      非单文件组件的一些缺陷： 

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