1、Vue实例
- new Vue()创建一个Vue实例
- 所有的组件其实都是Vue实例
2、Vue实例的生命周期钩子
- 每个Vue实例在被创建时都要经过一系列的初始化过程
初始化过程 | |
---|
created() | 组件初始化完成,比较常用 |
mounted() | 模板已经创建,比较常用 |
updated() | 模板数据更新 |
destoryed() | 实例销毁 |
3、生命周期钩子的作用
- 页面加载的时候,主动执行某些程序,提前加载获取数据显示到页面
4、通过计时器,模拟一个ajax异步加载数据(created
)
<template>
<div id="app">
<div v-if="loading">
<h1>异步加载数据正在进行中...</h1>
</div>
<div v-if="!loading">
<h1>异步加载数据完成!</h1>
<ul v-for="(value, index) of userList" :key="index">
<li>{{ value }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
created() {
console.log("这是created函数的内容");
this.getUserList();
this.loading = false;
},
mounted() {
console.log("这是mounted函数的内容");
},
data() {
return {
userList: [],
loading: true,
};
},
methods: {
getUserList() {
setTimeout(() => {
this.userList = ["jasmine", "jamsine_qiqi", "qiqi"];
}, 3000);
},
},
};
</script>
<style></style>