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

学习vue 大坑,命名中短横线与大小写变换

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

 

置顶有一个王小森于 2017-07-12 10:13:47 发布40886 收藏 21

分类专栏: vue.js 文章标签: camelCase kebab-case vue-js

版权

vue.js专栏收录该内容

43 篇文章3 订阅

订阅专栏

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>

 

 

posted @   weishangyi  阅读(545)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示