791 字 12 分钟

本文最后更新于：1 个月前

组件名必须全小写

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

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

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

<!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>

错误显示：

Hello, MelodyJerry!

正确显示，应该是：

· This is a Vue-Component.

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

  • 调用methods里的方法,得用()
    • methods是方法
  • 调用computed的方法,不能用()
    • computed是计算属性，是属性
<!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中的方法
<!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>

页面显示：

currentTime1: 1

currentTime1: function () { [native code] }

 目录