• Vue中调用组件使用kebab-case（短横线）命名法和使用大驼峰的区别

    文章目录

    Vue中调用组件使用kebab-case（短横线）命名法和使用大驼峰的区别

    1.解析官网手册说明

    在这里插入图片描述

    红线部分已经说的很清楚，“直接在DOM（即非字符串模版）中只有kebab-case 生效”。

    只不过说的不是人话，现在我们来具体分析一下。

    2.什么是“字符串模版”，什么是“dom模版”

    • 字符串模版

    字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。

    实例：

    Vue.component('MyComponentA', {
    template: '
    hello, world
    '    
})

<div id="app">
    <MyComponentA></MyComponentA>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • dom模版(或者称为Html模板)

    dom模板就是写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。

    下面的例子不会被正确渲染, 会被解析成mycomponent,但是注册的vue的组件是MyComponent，因此无法渲染。

    <!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue
            <MyComponent></MyComponent>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('MyComponent', {
            template: '
    组件类容
    '    
        });
        new Vue ({
            el: '#app'
        });
    </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    能正常显示的：

    <!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app"> 
            Hello Vue
            <my-component></my-component>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script >
        //全局注册
        Vue.component('my-component', {
            template: '
    组件类容
    '    
        });
        new Vue ({
            el: '#app'
        });
    </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    总结：
    通过上面的实例很简单就能看出，如果是在html中使用组件，那么就不能用大驼峰式写法。如果是在.vue 文件中就可以，就这么简单。

  • 相关阅读:
    Docker 网络管理及资源控制
    torch.mm
    没有有线网卡的笔记本如何在PVE下All in one？—NAS + Linux +win下载机
    【Python(一)】环境搭建之Anaconda安装
    十大券商：“推土机行情”再现
    基于C语言的词法分析实验
    Misc | bucket 第二届“奇安信”杯网络安全技能竞赛
    hw0906
    Java之list集合的详细解析
    Android Compose 修饰符类行为整理
  • 原文地址：https://blog.csdn.net/weixin_35773751/article/details/133811819