新手踩坑:vue注册组件命名不能用大写?

记录一下vue组件化开发遇到的坑。踩坑如下:
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <myCpn></myCpn>
    </div>
    <script>
        //1.创建组件构造器
        const cpnConstructor = Vue.extend({
            template:'<div>呵呵呵</div>'
        }) ;
        //2.注册组件
        Vue.component('myCpn',cpnConstructor) ;
        const app = new Vue({
            el: '#app' 
        })
    </script>
</body>
</html>

打开浏览器却发现报错:组件并没有被渲染出来,反而报错了说我用的组件没有注册,我当时真是挤破脑袋想了半天也没发现问题出在哪里
在这里插入图片描述
然后仔细一看:在这里插入图片描述
我明明使用的是Mycpn怎么变成了mycpn,于是把自定义的组件也改成小写,代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycpn></mycpn>
    </div>
    <script>
        //1.创建组件构造器
        const cpnConstructor = Vue.extend({
            template:'<div>自定义组件</div>'
        }) ;
        //2.注册组件
        Vue.component('myCpn',cpnConstructor) ;
        const app = new Vue({
            el: '#app' 
        })
    </script>
</body>
</html>

然后运行代码,完全正常,这时候大家都会认为vue注册组件不能用大写命名,后面我也试了很多种命名方式,比如”my-template“这样也是可以的

”My-template“这样的会报错


后来在官网看到这句话camelCase vs. kebab-case HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。

一切都水落石出了,哈哈

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页