vue+axios安装

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

安装方式：

1.使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用npm安装

npm/cnpm install axios

在main.js中import axios并将其挂载到Vue实例上

import Axios from 'axios'

Vue.prototype.$axios = Axios //调用时使用this. $axios()

3.点击随机切换笑话的小例子

<template>

  <div id="app">

    <input type="button" name id value="获取笑话" @click="getJoke" />

    <p>{{joke}}</p>

  </div>

</template>

<script>

export default {

  name: "App",

  data: () => {

    return {

      joke: "很好笑的笑话"

    };

  },

  methods: {

    getJoke: function() {

      // axios回调函数中的this已经改变，无法访问到data中数据

      // 可以var that = this； 回调函数中用that访问data中数据

      var that=this;

      this.$axios({

        url: "https://autumnfish.cn/api/joke",

        methods: "get"

      }).then(

        function(response) {

          console.log(response.data);

          that.joke=response.data

        },

        function(err) {}

      );

    }

  },

  created: function() {}

};

</script>

<style>

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

ul,

li {

  list-style: none;

}

</style>

巴特西

vue+axios安装

最新文章

热门文章