Vue组件中需要注意的细节

1，组件名

命名规范：一般小驼峰写法

2，组件定义时的名字和注册时的名字

定义时候：const s = Vue.expend({.......})

注册时候：Vue({components:{school：s}})

那么在用的时候，名字就是school

2-2，在定义时，const s= Vue.expend({name:'Wuhan'})

那么在开发者工具中呈现的名字，显示的是Wuhan。

（一般第三方的组件库会这么用）

3，组件标签：自闭和   <school/>（要在脚手架下）

4，创建组件的简写：内部代码可以忽略

const school = Vue.extend({
        // 为啥要有一个div包着？因为要使用template必须要有一个根元素
        template:`
            <div>
                <h2>学校是{{schoolName}}</h2>
                <h2>学校的地址是{{schoolAdress}}</h2>
            </div>
        `,
        // data必须写成函数式
        data(){
            return {
                schoolName:'WIT',
                schoolAdress:'ts'
            }
        }
    })

简写为：Vue.extend() 可以不写

const school ={
        // 为啥要有一个div包着？因为要使用template必须要有一个根元素
        template:`
            <div>
                <h2>学校是{{schoolName}}</h2>
                <h2>学校的地址是{{schoolAdress}}</h2>
            </div>
        `,
        // data必须写成函数式
        data(){
            return {
                schoolName:'WIT',
                schoolAdress:'ts'
            }
        }
    }