一.axios的使用
1.作用:axios是一个专门用于发送ajax请求的库，是基于原生ajax+Prmise技术封装通用于前后端的请求库。
2.特点：
1.支持客户端发送ajax请求
2.支持服务端Node.js发送请求
3.支持Promise相关的用法
4.支持请求和响应的拦截功能
5.自动转换JSON数据
3.利用axios发送get请求
第一步: 下载对应的包
npm i axios第二步: 引入要使用的包
import axios from 'axios'第三步:利用axios发送请求
<template>
<div class="">
<ul>
<li v-for="obj in list " :key="obj.id">{
{obj.bookname}}</li>
</ul>
<input type="text" v-model="bookname">
<button @click="fn">发送get请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){return{
bookname:'',
list:[]
}},
name: '',
methods: {
fn(){
// alert('11111111')
axios({
method:'GET',
url:"/api/getbooks",,
params:{bookname:this.bookname}
}).then(res=>this.list=res.data.data)
}
},
}
</script>his.list=res.data.data)解析:method定义请求的方式，url定义请求的地址，如果需要使用get提交参数采用params，如果采用post提交则使用data进行提交作为配置项提交数据，then（）是一个异步的回调函数，来接收响应会来的数据。同理如果采用axios发送post请求则对响应的配置项进行更改，
4.全局的配置项
1.每次在写地址的时候跟路径写起来非常的麻烦，axios提供了解决的方法
axios.defaults.baseURL ="http://www.liulongbin.top:3006"（后面接的是根路径）同上面的代码把根路径变成一个全局配置项，这样就不用每次去写了，如果以后地址要更改也方便进行跟换。
二.ref的使用
1.作用:利用ref可以获取到dom的对象，也可以获取组件。
2.语法:在需要获取的DOM标签上定义 ref属性并且赋值
<h1 ref="aa"></h1>然后通过this.$ref.(赋在ref上的那个值就行获取)
mounted() {
console.log(this.$refs.aa);
},3.获取组件，并且调用组件里面的方法
在一个组件定义一个方法，然后引入另外的一个组件，给组件定义ref.值，然后通过this.$ref.值，就获取到了这个组件，然后就可以调用这个方法。
三. this.nextTick的使用
1.nextTick是用来干什么的？
因为Vue跟新数据是异步的，如果想要获取到实时跟新的数据 this.nextTick(()=>{}),通过异步的回调解决了这一问题。
2.代码举例
<template>
<div class="">
<h1 ref="myP">{
{counter}}</h1>
<button @click="fn">点击</button>
</div>
</template>
<script>
export default {
name: '',
data(){return{
counter:0
}},
methods: {
fn(){
this.counter++
console.log(this.$refs.myP.innerHTML);
}
},
}
</script>
解析:当点击按钮的时候counter=>couter++ 变成了1，而我们通过this.$refs.myP.innerHTML 拿到的是0，因为什么呢？ 因为Vue跟新数据是异步的。
怎么解决这一问题呢？
通过：异步的回调即可，等到跟新完毕之后，通过回调获得真实的值，代码片段:
this.$nextTick(()=>{
console.log(this.$refs.myP.innerHTML);
})3.通过promise中的async 和await进行解决
1.this.$nextTick 原地返回是一个Promise对象。
2.async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出 现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作
async fn(){
this.counter++
await this.$nextTick(()=>{
console.log(this.$refs.myP.innerHTML);
})
}3.使用async和await的注意事项
await关键字后面要跟 Promise对象
await关键字仅仅只能出来在被async修饰的函数里面
在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行
新手小白多多支持