初用组件化遇坑总结

1.template模板中的HTML代码必须要有一个根标签

            const myC = Vue.extend({
                template:`  
                    <h2>hello</h2>
                    <p>你好</p>`
            })

h2和p标签没有一个根标签
只展示了h2标签

image.png

报错信息：

image.png

2.创建Vue实例的代码要放在组件化代码的后面

image.png

报错信息：警告没有提供正确注册组件化标签名

image.png
image.png

正常运行：

image.png

3.注册组件的标签命名问题

1.注册组件的标签用小驼峰命名时，在html中使用组件时，要用-隔开

标签名用小驼峰命名法myCom

image.png

当html中使用组件时没用-隔开

image.png

mycom和myCom没有区别，html不区分大小写

报错：提示要提供正确的标签名

image.png

用-隔开后

image.png

正常显示

总结注册组件的标签名命名问题
1.注册组件时用小驼峰命名法时，html中使用组件时要用-隔开
2.注册组件时，组件的标签名可以都用小写，不要出现大写字母