1、在my-project项目中引入axios依赖:cnpm install --save axios
2、main.js 中引入 axios:
// 在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令
import axios from 'axios'
Vue.prototype.$http = axios
(将 axios 改写为 Vue 的原型属性,只加第一条,有时候无法在其它的组件中使用 axios)
3、App.vue文件内容如下,当然你也可以在别的组件中调用
<template>
<div id="app">
<img src="./assets/logo.png">
{{ msg }}
2、写一个按钮触发函数调起接口
<a href="javascript:" v-on:click="get()">GET按钮</a>
</div>
</template>
<script>
// 1、使用import导入axios,一定不要忘了先导入axios
import axios from 'axios'
export default {
name: 'App',
data () {
return {
title: '我去!!!',
msg:'',
apiurl: 'http://api/baidu.com/storage/?room=1'
}
},
methods: {
get: function() {
axios.get("http://api/baidu.com/txcjapi/storage/", {
params: { room: '1'}
}).then(res => {
this.msg = res.data
})
.catch((error) => {
this.msg = error
})
},
}
</script>
<style>
</style>