生命周期函数比较难理解,但是也是必备的基础,在实际开发当中,我们最常用的生命周期函数是哪个呢——个人认为是使用axios请求数据的时候, created()来调用axios请求,也可与在组件beforeupdate之前先把数据请求过来待用。
axios请求例子:
<template>
<div class="home">
</div>
</template>
<script>
//引入axios
import axios from 'axios';
//补充知识点:vue的生命周期
//vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染》更新》渲染、卸载等一系列过程,我们称这是vue的生命周期。
//通俗说就是vue实例从创建到销毁的过程,就是生命周期
//注意:事件响应方法中的this直接指向的是vue的实例
export default {
name: 'Home',
created(){
//生命周期钩子函数
//一般可以在created函数中调用ajax获取页面初始化所需的数据
//这里的接口用在public文件夹创建的data.josn代替
//接口路径:在项目启动的时候,是以public文件夹为根节点,例如:编译成功后 http://localhost:8080/就是访问public文件夹里的index.html
//.then((res)=>{})里的res是指请求接口后成功返回的响应数据,包含请求头、请求体、等信息
axios.get('/data.json').then((res)=>{
console.log(res)
})
}
}
</script>
生命周期常用代码:
<template>
<div class="first-app">
{{msg}}
<br/>
{{msg1}}
<Confin text='注册' @message="getMeaasge"></Confin>
</div>
</template>
<script>
import Confin from '@/components/sub/Confin';
export default {
name: 'Fist',
components: {Confin}, //注册组件,比如要插入另外一个写好的VUE文件买这个时候就需要添加
props:[], //接受父亲的参数
data () {
return {
msg: 'Welcome to Your FistApp ddddd'
}
},
mounted(){ //dom挂在完成 相当于onload,方法的调用
//this.getMeaasge();
},
computed:{ //计算属性
msg1(){
return this.msg+'1';
}
},
methods:{ //这里面添加所有的方法
getMeaasge(val){
alert(val)
}
}
}
</script>
<style>
.first-app{
color:#f00;
font-size:40px;
}
</style>