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

最新推荐文章于 2025-03-11 19:02:48 发布

原创最新推荐文章于 2025-03-11 19:02:48 发布 · 340 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #vue.js

vue 专栏收录该内容

5 篇文章

订阅专栏

本文展示了如何在Vue.js项目中安装并使用Axios库从远程API获取数据。首先通过npm安装axios，然后在main.js文件中全局引入并挂载到Vue实例上。接着，在组件中定义一个方法，利用$axios的get方法获取指定URL的joke数据，并将其显示在页面上。通过这种方式，可以轻松地在Vue应用中实现数据交互。

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>