关于vue的学习（七）

一.vue_axios

1.vue_axios基本使用

特点

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

• axios 底层还是原生js实现, 内部通过Promise封装的

axios的基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
       xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

2.axios基本使用-获取数据

功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

接口: 参考预习资料.md – 接口文档

引入: 下载axios, 引入后才能使用

axios({
        url: "~",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res);
      });

3.axios基本使用-传参

 axios({
        url: "~",
        method: "GET",
        params: { // 都会axios最终拼接到url?后面
            bookname: this.bName
        }
      }).then(res => {
          console.log(res);
      })

axios({
           url: "~",
           method: "POST",
           data: 
            // bookname: .bookname,
            // author: author,
            // publisher: publisher
           }

4.axios基本使用-全局配置

axios.defaults.baseURL = "~"

二.nextTick和​refs知识

1.利用 ref 和 $refs 可以用于获取 dom 元素

<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>

export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}

2.获取组件对象, 调用组件里方法

<Demo ref="de"></Demo>

import Demo from './Child/Demo'
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1

        let demoObj = this.$refs.de;
        demoObj.fn()
    },
    components: {
        Demo
    }
}

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量