Vue Camel vs Kabeb

Comments

Vue Camel vs Kabeb

props

总结：props传递参数时，主要是看props是怎么定义的。如果props是驼峰或者中划线定义的字段，那么在传递参数是，只能使用中划线的格式去传递参数。
如果props使用的是全小写定义的参数，那么传递参数时，只要所写的参数的字母全部小写后和props保持一致就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <child v-bind:myMEssage="message"></child>
    <child v-bind:myMessage="message"></child>
    <child v-bind:mymessage="message"></child>
    <!--
    由于HTML的特性不识别大小写，所以“myMEssage”与“mymessage”是一样的，都解析为小写。故而下边的组件也应该是小写。
    在html中使用驼峰以及大小写穿插的字母是没有意义的，会统一转成小写对待。
    如果调用组件传参是，使用了大小写的参数传参，在组件中定义props时也使用了对应的大小写，那么实际上就是：
    组件接的参数是 myMessage，但是传递的参数是：mymessage，组件接收不到对应的参数。
    -->
</div>
</body>
</html>

<script src="js/vue.js"></script>

<script>


    //定义用户列表
    const child = {
        // 这两个参数肯定得一直才行
        props: ['myMessage'],
        template: '<p>{{myMessage}}</p>'
    };


    const app = new Vue({
        el: "#app",
        data: {
            message: "vue router 基本使用之嵌套路由"
        },
        components: { //注册局部组件
            child,
        }

    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <child v-bind:my-message="message"></child>
    <!--此处的my-message只能是短横线命名（若为驼峰式则全部转换为小写。）-->
</div>
</body>
</html>

<script src="js/vue.js"></script>

<script>


    //定义用户列表
    const child = {
        // props:['my-message'],
        props: ['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式，他们在此处是相互转换的

        template: '<p>{{myMessage}}</p>'
        // template:'<p>{{my-message}}</p>'
        // 此处有限制，是字符串模板，{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。如下图：
    };


    const app = new Vue({
        el: "#app",
        data: {
            message: "vue router 基本使用之嵌套路由"
        },
        components: { //注册局部组件
            child,
        }

    });
</script>

component

总结：component组件命名时，只能是驼峰（不能中划线定义）。

注册组件时，可以使用两种方式去注册

1
Vue.component('my-component-name', { /* ... */ })
1
Vue.component('MyComponentName', { /* ... */ })

在使用时是，只能使用中划线的格式去渲染组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <my-child v-bind:myMEssage="message"></my-child>
    <my-child v-bind:myMessage="message"></my-child>
    <!--  MyChild会被解析为 mychild-->
    <MyChild v-bind:mymessage="message"></MyChild>
    <!--
    https://www.jianshu.com/p/4348e6c60da4
    字符串模板就是写在vue中的template中定义的模板，如.vue的单文件组件模板和定义组件时template属性值的模板。
    字符串模板不会在页面初始化参与页面的渲染，会被vue进行解析编译之后再被浏览器渲染，所以不受限于html结构和标签的命名。
dom模板就是写在html文件中，一打开就会被浏览器进行解析渲染的，所以要遵循html结构和标签的命名，否则浏览器不解析也就不能获取内容了。
    -->
</div>
</body>
</html>

<script src="js/vue.js"></script>

<script>


    //定义用户列表
    const MyChild = {
        // 这两个参数肯定得一直才行
        props: ['mymessage'],
        template: '<p>{{mymessage}}</p>'
    };


    const app = new Vue({
        el: "#app",
        data: {
            message: "vue router 基本使用之嵌套路由"
        },
        components: { //注册局部组件
            MyChild
        }

    });
</script>

event

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

1
this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

1
2
<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

参考链接：

https://www.jianshu.com/p/4348e6c60da4

https://v2.cn.vuejs.org/v2/guide/components-custom-events.html

SonicBrotherjava devops

在互联网摸爬滚打