vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)

在vue官网上有这样的一句话:
“camelCase vs. kebab-case
HTML 属性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。”
小森表示对这句话好懵啊!
经过自己的各种倒弄终于得到了下边的东西。
##重点在这里:
1、html特性不区分大小写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>prop动态=绑定</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="message">
    <!--<child v-bind:myMEssage="message"></child>-->
    <child v-bind:mymessage="message"></child>
    <!--由于HTML的特性不识别大小写,所以“myMEssage”与“mymessage”是一样的,都解析为小写。故而下边的组件也应该是小写。-->
</div>
<script>
    Vue.component('child',{
    //此处都为小写。
        props:['mymessage'],
        template:'<p>{{mymessage}}</p>'
    });
    new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>
</body>
</html>

2、组件中使用camelCased(驼峰式)命名,在html中应改为kebab-case(短横线)命名方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>prop动态=绑定</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="message">
    <child v-bind:my-message="message"></child>
    <!--此处的my-message只能是短横线命名(若为驼峰式则全部转换为小写。)-->
</div>
<script>
    Vue.component('child',{
//        props:['my-message'],
        props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的

        template:'<p>{{myMessage}}</p>'
        // 此处有限制,是字符串模板,{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式,则会报错。如下图:
    });
    new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>
</body>
</html>

{​{my-message}}会解析为NaN,my-message也会分开解析为my 和message,出现报错。

  • 21
    点赞
  • 26
    收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 6

打赏作者

有一个王小森

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值