Vue.js 学习日志——Axios请求数据（十二）

Vue.js - Axios

这里我们使用 Vue 推荐的 axios 来进行 ajax 请求。

---

1、初始化项目

使用 vue-cli 初始化 vue-axios 项目。

vue init webpack vue-axios

---

2、安装 axios

cnpm install axios --save

---

3、引入 axios

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入axios,vue实例都可以使用 this.$axios 来请求
import axios from 'axios'
Vue.prototype.$axios = axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这样修改后，我们所有的vue实例都可以使用 this.$axios 来请求了。

---

4、编写测试代码

修改 HelloWorld.vue 文件来进行 axios测试。

<template>
  <div>
    <button type="button" @click="getLoaclData">本地数据</button>
    <!-- 本地数据 -->
    <ul>
      <li v-for="data in localdatas" :key="data.value">
        <span>{{data.value}}===>{{data.text}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      localdatas:[]
    };
  },
  methods:{
    getLoaclData(){
      this.$axios.get('../static/data.json')
        .then(response => {
          if(response.data.status == '0000'){
            this.localdatas = response.data.datas
          }
        })
    }
  }
};
</script>

<style>

</style>

data.json 文件

{
	"status":"0000",
	"msg":"succ",
	"datas":[
		{"value":"hn","text":"湖南"},
		{"value":"gd","text":"广东"},
		{"value":"sh","text":"上海"},
		{"value":"bj","text":"北京"}
	]
}

---

5、运行查看效果