真开心啊,就是一早上chengli大师姐,三下五除二就解决了我一直没懂的问题:
first.如何在app.vue里面注册组件
1.import :路径要写对,这个最重要。
import Todolist from './components/todolist.vue';
2.export 引出:这个页面的组件叫做 App,然后把上面引入的引出,这个名字一样就可以了。
export default {
name: 'App',
components:{
Todolist}
}
second.如果我在一个文件里写了不同的代码,例如:
<script>
export default {
data() {
return {
count: 3
}
},
methods: {
mySwitch() {
console.log(`the component is now mounted.`)
var day;
var a = 3;
switch (a) {
case 0:
day = "星期天";
break;
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
}
document.getElementById("demo").innerHTML = day;
console.log(day);
console.log(this.count);
},
myMap() {
var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
text += person[x];
}
document.getElementById("demo").innerHTML = text;
}
},
mounted() {
// this.mySwitch();
this.mySwitch();
this.count;
document.getElementById("demo1").innerHTML = this.count;
}
}
</script>
<template>
<div id="jsDemo">
<p id="demo"></p >
<p id="demo1"></p >
</div>
</template>
用大白话说:毕竟我现在还是学没明白vue。。。
这段代码里,既有data的返回数据,计算星期数,人的姓名年龄,那这个时候,如果我是import的话,是全都import了?还是我可以选择其中一个?
mounted() {
// this.mySwitch();
this.mySwitch();
this.count;
document.getElementById("demo1").innerHTML = this.count;
}
看这段代码,这是生命周期里面的内容,(待学),这里就解决了我是要选择哪段代码可以显示