本文最后更新于: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",{
});
//再实例化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] }
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!