vue axios引入--实例（单个组件）

1、下载 引入

npm install --save axios

在main.js中引入

import axios from 'axios' //这一行

Vue.config.productionTip = false
Vue.prototype.$axios = axios //这一行
new Vue({
  axios,     //这一行
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2、组件中应用 get方法

<template>
  <div>
    <div class="about">
      <button @click="getData">获取数据</button>
      <ul>
        <li>{{ jokes }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jokes: [],
    };
  },
  methods: {
    getData() {
      this.$axios
        .get("https://autumnfish.cn/api/joke/list?num=3")
        .then((res) => {
          console.log(res.data);
          this.jokes = res.data.jokes;
          console.log(this.jokes);
        });
    },
  },
};
</script>