<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</style>
</head>
<body>
<div id="app">
<Banner />
</div>
<template id="banner">
<div>
{{name}}
</div>
</div>
</template>
<script>
new Vue({
el: '#app',
components: {
'banner': {
template: '#banner',
data() {
return {
name: '网易',
}
},
beforeCreate() {
// 没有dom 没有数据
// 这个生命周期可以做网络请求
console.log('创建之前')
console.log(this) // VueComponent
console.log(this.name) // undefined
console.log(document.getElementById('p')) // null
console.log('-------------------')
},
created() {
// 没有dom 有数据
// 这个生命周期可以做网络请求 可以做数据修改
// 推荐created做网络请求
console.log('创建结束')
console.log(this)
console.log(this.name) // 网易
this.name = '呵呵'
console.log(this.name) // 呵呵
console.log(document.getElementById('p')) // null
},
}
}
})
</script>
</body>
</html>```
vue生命周期_创建
最新推荐文章于 2022-07-27 17:47:18 发布