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

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

重点在这里:

1、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>
    
div>
<script>
    Vue.component('child',{
    //此处都为小写。
        props:['mymessage'],
        template:'

{{mymessage}}

'
}); new Vue({ el:'#app', data:{ message:'' } })
script> body> html>

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


<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>
    
div>
<script>
    Vue.component('child',{
//        props:['my-message'],
        props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的

        template:'

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

vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)_第1张图片

你可能感兴趣的:(vue.js)