码迷,mamicode.com
首页 > 移动开发 > 详细

vue+axios安装

时间:2020-01-31 12:12:09      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:tps   class   top   api   hat   安装   imp   ons   get   

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安装

标签:tps   class   top   api   hat   安装   imp   ons   get   

原文地址:https://www.cnblogs.com/yieix/p/12244790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!