Vue使用axios

下载：

npm install axios

引入：

import axios from 'axios'
Vue.prototype.$axios = axios

在.vue文件中使用：

<template>
  <div class="hello">
    <button @click="getData">获取数据</button>
    <p>{{content}}</p>
    <div v-for="joke in jokes">{{joke}}</div>
    <button @click="getPostData">获取数据</button>
    <p>{{postmeg}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      jokes: [],
      content:'hello world',
      postmeg:'hello post',
      uname: 'jack'
    }
  },
  methods: {
  //定义一个getData的方法
    getData () {
    //调用axios的get方法，方法中写地址
      this.$axios.get('https://autumnfish.cn/api/joke/list?num=3')
      //.then是返回的结果，不管是正确的，还是错误的
      //格式.then(正确的结果=>{操作},错误的结果=>{操作})
      //正确的结果：是一个名字，该名字你随便取
      //错误的结果：是一个名字，该名字你随便取
        .then(res => {
        //this.content是该vue定义的变量
        /*res.data.msg：res是后台返回的数据，
        该res数据中有一个data的数据，
        data的数据中有一个叫msg的数据*/
          this.content = res.data.msg
          this.jokes = res.data.jokes
          console.log(res)
        },error=>{
          console.log(error)
        })
    },
    getPostData () {
      this.$axios.post('https://autumnfish.cn/api/user/reg',{
        username: this.uname
      }).then(res => {
        this.postmeg = res.data
        console.log(res.data)
      })
    }
  }
}
</script>

使用后的效果图