[JavaScript知识库]vue生命周期和vue请求

一、生命周期 ??
? ? ? 定义：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
? ? ?1、创建之前： beforeCreate(){console.log(this.msg);}, ? ? 初始化尚未完成，data数据，metheds方法都未挂在在vue实例上，一般用于页面重定向
? ? ?2、创建之后：created(){console.log(this.msg);}, ? ? ?第一个能操作data数据的生命周期，一般用于接口请求+数据初始化
? ? ?3、beforeMount(){console.log(3);// debugger}, ? ?虚拟dom挂载前，此时页面元素尚未更新
? ? ?4、mounted(){ console.log(4);}, ? ? ?dom元素挂载后，如果需要操作dom，可以在此生命周期执行
? ? ?5、beforeUpdate(){ console.log(5); }, ? 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
? ? ? ? ? updated(){console.log(6);}, ? ? ?可以执行0-多次 ? ? updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

? ? 6、beforeDestroy ? ?和 ? destroyed

二、vue-resource的使用 ? ? ?
? ? 注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件
? ? 1、get请求和post请求 （格式）
??

created(){
    // get请求
? ? this.$http.get(this.baseUrl+'/weChat/applet/course/banner/list?number=4').then(res => {
? ? ? ?console.log(res);
? ? ? ?this.imgList = res.data.data
? ? ? ?})
? ? // post请求
? ? this.$http.post(this.baseUrl+'/weChat/applet/course/list/type', ? ? ? ? ? ? ? ? ? ? ? ? 
   {type:'free',pageSize:10,pageNum:1},{ emulateJSON: true }).then(res =>{
       console.log(res);
       this.courseList = res.data.rows})
}

三、axios的使用 ?（格式）
? ? ? 1、get请求
?? ?

created（）{
??? ?axios.get("http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4").then(res=>{
? ? ? ?// console.log(res);
? ? ? ?this.imgSrc = res.data.data[0].imgUrlPc
? ? ? ?this.imgList = res.data.data
? ?}
)}

? ? ? ?2、post请求
? ? ? （1）?

axios.post(this.baseurl+"/weChat/applet/subject/list",{enable:1}).then(res=>{
? ? console.log(res);
})

? ? ? （2）

created（）{
?? ? ?// 内置对象 ? 这里面实现传参
? ? ? let formurl = new URLSearchParams()
? ? ? formurl.append('type','free')
? ? ? formurl.append('pageSize',10)
? ? ? formurl.append('pageNum',1)
? ? ? // post请求
      axios.post(this.baseurl+"/weChat/applet/course/list/type",formurl).then(res=>{
? ? ? console.log(res);
? ? ? this.courseList = res.data.rows
? ? ?})
?}