Vue踩坑记录
组件名必须全小写
官方文档没有声明组件名必须全小写
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> -->
<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("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] }
💥 一个正在学习全栈的 💥
⭐ 精神小伙 ⭐
💥 MelodyJerry 💥
