vue怎么在初始化页面的时候自动获取数据
时间: 2024-02-16 15:03:46 浏览: 26
在Vue中,可以使用`created`或`mounted`生命周期钩子函数来在组件初始化时获取数据。其中,`created`是在组件创建完成后立即执行的函数,此时组件的DOM树尚未渲染,而`mounted`是在组件挂载到DOM树后执行的函数,在此时可以访问到组件的DOM元素。
下面是一个使用`created`钩子函数获取数据的示例代码:
```
<template>
<div>
<ul>
<li v-for="item in dataList" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataList: []
}
},
created() {
// 在组件创建完成后立即执行,可以在此处获取数据
this.getDataList()
},
methods: {
getDataList() {
// 发起数据请求获取数据
// ...
// 将获取到的数据赋值给dataList
this.dataList = responseData.data
}
}
}
</script>
```
在上述代码中,我们使用了`created`钩子函数,在组件创建完成后立即执行`getDataList`方法来获取数据,并将获取到的数据赋值给`dataList`。此时,组件的DOM树尚未渲染,但`dataList`已经包含了获取到的数据,可以在模板中使用`v-for`指令来渲染数据。