Vue基础--生命周期

一、生命周期钩子的作用
页面加载的时候，主动执行某些程序

methods"{
		getData(){
			// do ajax
		}
	}

二、模拟场景
当页面加载完成之后，向后台加载数据

三、Vue 实例
new Vue 创建一个 Vue 实例
所有组件其实都是 VUe 实例
三、Vue 实例的生命周期钩子（函数）
每个 Vue 实例在被创建时（ new Vue）都要经过一系列的初始化过程
create（）组件初始化完成
mounted() 模板已创建

<template>
<div>
	<h1> hello world</h1>
</div>
</template?

<script>
	export default {
		mounted(){
			console.log("这是mounted的内容")
		}，
		created(){
				console.log("这是create的内容 ")
			}
	}
</script>

四、异步加载水果列表

<template>
<div>
	<h1> hello 水果列表</h1>
	<ul>
      <li v-for="(items,index) of fruits :key=index">
        {{items}}
      </li>
    </ul>
</d iv>
</template?

<script>
	export default {
	data(){
			return {
				fruitList:[]
			}
		}
		created(){
				this.getData();
			},
			methods:{
			getData(){
					setTimeout(()=>{
					this.friuts = ["香蕉"，"苹果"，"草莓"]	
				},2000)
			}
		}
	}
</script>

五、练习
当组件数据未加载完成时，显示 loading,加载完成后显示数据