MelodyHub

没有伞的孩子必须努力奔跑！|

组件名必须全小写

官方文档没有声明组件名必须全小写

1
2
3
Vue.component('my-component-name', {
  // ... options ...
})

但是我的第一个Vue组件踩了这个坑

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Vue</title>
</head>
 
<body>
    <!-- view层 模板 -->
    <div id="app">
        <!-- <li> Hello, MelodyJerry! </li> -->
        <melody> Hello, MelodyJerry! </melody>
        <!-- <MelodyJerry> Hello, MelodyJerry! </MelodyJerry> -->
    </div>
 
    <!-- 1.导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        //先注册组件，定义一个Vue组件component
        Vue.component("melody",{ //组件名必须全小写，一旦有大写，就会注册错误
        // Vue.component("MelodyJerry",{ 
            template: '<li> This is a Vue-Component. </li>'
        });
 
        //再实例化Vue
        var vm = new Vue({
            el: "#app",
        });
    </script>
</body>
</html>

错误显示：

1
Hello, MelodyJerry!

正确显示，应该是：

1
· This is a Vue-Component.

methods和computed里调用方法要不要()

  • 调用methods里的方法,得用()
    • methods是方法
  • 调用computed的方法,不能用()
    • computed是计算属性，是属性
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Vue</title>
</head>

<body>
    <!-- view层 模板 -->
    <div id="app">
        <!-- 调用methods里的方法,得用() -->
        <p>currentTime1: {{currentTime1()}}</p>
        <!-- 调用计算属性computed的方法,不能用() -->
        <p>currentTime2: {{currentTime2}}</p>
    </div>

    <!-- 1.导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,melodyjerry."
            },
            methods: {
                currentTime1: function() {
                    var Xmas95 = new Date("December 25, 1995 23:15:30");
                    return Xmas95.getDay(); //1;返回数值代表星期几：0代表星期日,1代表星期一,2代表星期二
                },
            },

            //计算属性
            computed: { //methods、computed中的方法名不能重名;重名后，只会调用methods中的方法
                currentTime2: function() {
                //currentTime1: function() {
                    return Date.now(); //返回一个时间戳
                },
            },
        })
    </script>
    
</body>
</html>

methods、computed中的方法名不能重名

  • 重名后，只会调用methods中的方法
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Vue</title>
</head>

<body>
    <!-- view层 模板 -->
    <div id="app">
        <!-- 调用方法得用() -->
        <p>currentTime1: {{currentTime1()}}</p>
        <p>currentTime1: {{currentTime1}}</p>
    </div>

    <!-- 1.导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,melodyjerry."
            },
            methods: {
                currentTime1: function() {
                    var Xmas95 = new Date("December 25, 1995 23:15:30");
                    return Xmas95.getDay(); //1;返回数值代表星期几：0代表星期日,1代表星期一,2代表星期二
                },
            },

            //计算属性
            computed: { //methods、computed中的方法名不能重名;重名后，只会调用methods中的方法
                currentTime1: function() {
                    return Date.now(); //返回一个时间戳
                },
            },
        })
    </script>
    
</body>
</html>

页面显示：

1
2
3
currentTime1: 1

currentTime1: function () { [native code] }

 上一页

笔记 Vue 前端

 评论


博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本站使用 Hexo 作为驱动引擎 ， 总浏览量为 次 ， 总访客数为 人
载入天数...载入时分秒...