学习day51

几个注意点：

          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

    
    
    



    
    

        
{{msg}}
        
    
    

组件的嵌套

实现如下嵌套

 

关于VueComponent

 

一个内置关系

VueComponent.protype._proto_=Vue.protype

Vue 和 vm的关系
Vue是一个函数，vm是其new出来的实例对象

因此:vm.__proto__ === Vue.prototype

VueComponent 和 VueComponent实例对象的关系
VueComponent 是一个函数，VueComponent实例对象是一个对象

当渲染VueComponent时，VueComponent实例对象就被自动new出来了

因此：VueComponent实例对象.___proto___=== VueComponent.prototype.__proto__

有了上面的铺垫，Vue有一个重要的内置关系：
VueComponent.prototype.__proto__ === Vue.prototype
所以：VueComponent实例对象.__proto__ === VueComponent.prototype.__proto__ === vm.__proto__ === Vue.prototype
有这个内置关系的原因是： 让VueComponent实例对象可以访问到Vue原型的属性和方法。

 

单文件组件

由下到上

School.vue

Student.vue

App.vue

main.js

import App from './App'

new Vue({
    el:"#root",
    template:``,
    components:{App}
})

index.html

但是仅仅只是这样设置的话，仍然时不可执行的，因为缺少脚手架。