vue（4）vue第四天一、Vue生命周期 1.什么是Vue生命周期？从创建到销毁的整个过程就是

vue第四天

一、Vue生命周期

1.什么是Vue生命周期？

从创建到销毁的整个过程就是 – Vue实例的 - 生命周期

2.钩子函数

目标：Vue 框架内置函数，随着组件的生命周期阶段，自动执行

(1)作用: 特定的时间点，执行特定的操作

(2)场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

(3)分类: 4大阶段8个方法

3.Vue实例从创建到显示都经历了哪些钩子函数?

beforeCreate / created / beforeMount / mounted

4.created函数里, 能获取真实DOM吗?

不能获取真实DOM

5.在什么钩子函数里可以获取真实DOM?

mounted

二、axios使用

1.作用：

axios 是一个专门用于发送ajax请求的库，axios 底层还是原生js实现, 内部通过Promise封装的

2.什么是ajax? ajax原理?axios是什么?

一种前端异步请求后端的技术

浏览器window接口的XMLHttpRequest

基于原生ajax+Promise技术封装通用于前后端的请求库

3.axios如何请求数据呢?

(1)基本用法

import axios from 'axios'  // 局部
export default {
  methods: {
    getBooks() {
      // axios 发请求只需要带上一个配置对象
      axios({
        // url 地址
        url: 'http://123.57.109.30:3006/api/getbooks',
        // method 请求方法
        method: 'get'
      }).then(res=>{
        // 这个库有个特点, 会将你发请求的配置放在返回中一起交给你, 最终的数据, 其实是放在 res.data
        console.log(res.data);
      })
    }
  }
}

（2）get请求带参方式

        params: {
          // get 请求的传输只能用参数方式
          // query 查询字符串的传参方式 => 这个参数会在 url 后面用 ?a=1 的形式拼接
          bookname: this.bookName
        }

(3)post 请求带参方式

        data: {
          // post 请求一般用这个方式带参数, 实际的作用是将数据放入到请求载荷(请求体)中
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          ...this.bookData
        }

其实 params 和 data 的传参方式一个用在 get 一个用在 post 这种说法只是一般约定, 但是技术上其实可以有例外, 比较确定的区别是, params 会将数据待在 url? 后面查询字符串, data 将数据放在请求载荷(请求体)

4.延展运算符(可理解为去括号)

// ... 展开运算符/延展运算符
// ...[1,2,3] => 1,2,3
// ...{name: 'tom', age: 13} => name: 'tom', age: 13
// const arr = [1,2,3]
// const arr2 = arr
// arr2[1] = 666
// const arr2 = [...arr]
// console.log(...[1,2,3]) => console.log(1,2,3);
// console.log(...{name: 'tom', age: 13}) => console.log(name: 'tom', age: 13)

5.axios全局封装

（1）改造全局配置

// /src/utils/request.js
// 改造 axios 添加基地址后重新导出
import axios from 'axios'
axios.defaults.baseURL = 'http://123.57.109.30:3006/api'

export default axios

（2）封装api函数管理层

// /src/api/book.js
// 这里是统一管理关于书籍的请求接口函数
// 获取书籍的a
import request from '@/utils/request'pi
export function getBooks(params) {
  return request({
    // url 地址
    url: '/getbooks',
    // method 请求方法
    method: 'get',
    params: params,
    data: {
      a:666
    }
  })
}

// App.vue 最终使用
import {getBooks} from '@/api/book'
const params = {
  bookname: this.bookName
}
getBooks(params).then(res=>{
  // 这个库有个特点, 会将你发请求的配置放在返回中一起交给你, 最终的数据, 其实是放在 res.data
  console.log('成功');
  console.log(res.data);
}).catch(err=>{
  console.log(err);
})

三、 $refs和$ nextTick使用

1.作用

通过id或ref属性获取原生DOM

2.基本使用

<template>
  <div>
    <!-- vue 获取元素的方法第一步设置一个 ref 属性 -->
    <div id="myBox" ref="myBoxRef">盒子</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // console.log(document.getElementById('myBox'));
    // vue 当中获取元素方法第二部 this.$refs.名字
    console.log(this.$refs.myBoxRef);
  }
}
</script>

<style>

</style>

3.获取子组件内的属性和方法

  components: {MyBox},
  mounted() {
    // console.log(document.getElementById('myBox'));
    // vue 当中获取元素方法第二部 this.$refs.名字
    // console.log(this.$refs.myBoxRef);
    // 用id获取组件
    console.log(document.getElementById('zjBox'));
    // 用ref获取组件
    console.log(this.$refs.zjBoxRef);
    setTimeout(() => {
      this.$refs.zjBoxRef.msg = '789'
      this.$refs.zjBoxRef.dajiao()
    }, 1000);
  
  }

4.$nextTick(回调函数)

（1）基本使用

等待当前所有代码执行完毕, 页面更新结束之后执行传入的回调函数，可解决异步问题

（2）代码

    toggleShow() {
      this.isShow = !this.isShow
      // 希望每次显示的时候都将这个 dom 打印在控制台
      // console.log(this.$refs.myBox);
      // this.$nextTick(回调函数) 作用是等待页面更新完毕执行回调函数
      this.$nextTick(()=>{
        console.log(this.$refs.myBox);
      })
    }

vue（4）