释放双眼,带上耳机,听听看~!
1、beforeCreate:创建前,不能访问data与methods,在当前 vue实例生命周期,只会执行一次;
2、created:创建后,能访问data与methods,但是也还是不能访问dom,在当前 vue实例生命周期,只会执行一次.
new Vue({
el: '#app',
methods: {
},
beforeCreate(){},
created(){}
})
功能:
-
:基本没啥用,可能以后项目很长一段时间你们都用不到
-
created
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :for="index">{{item}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script>
// 实例化
new Vue({
el: "div",
data: {
list: []
},
methods: {
test(msg) {
console.log(msg);
}
},
beforeCreate() {
// beforeCreate无法访问data里面的属性与methods里面的方法,
// this.test("beforeCreate")
console.log("beforeCreate:", this.list)
},
created() {
// created是能够访问data里面的属性也能访问methods里面的方法,但不能访问dom(vue所加工处理后的dom,这点后面会讲)
this.test("created")
console.log("created:", this.list)
axios({
url: "https://autumnfish.cn/api/joke/list",
method: "get",
params: {
num: 10
}
}).then(response => {
this.list = response.data.jokes
console.log(response)
})
}
})
</script>
</body>
</html>
内容投诉