vue快速入门（四十三）axios模块的安装与引入
步调很具体，直接上教程上一篇
[*]在项目目录打开终端
https://i-blog.csdnimg.cn/blog_migrate/10a93f3bcb441852f90f15ae001b51ee.png
[*]输入以下命令安装axios
npm i axios
[*] 重新打开项目即可完成按照
[*] 测试
源码
main.js
import Vue from 'vue'
import App from './App.vue'
//全局引入axios
// 引入axios
import axios from 'axios';
// 挂载到vue原型链上
Vue.prototype.axios = axios;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<TestComponent/>
</div>
</template>
<script>
import TestComponent from "./components/TestComponent.vue";
export default {
name: "App",
components: {
TestComponent
},
data() {
return {
};
},
methods: {
}
};
</script>
<style></style>
TestComponent.vue
<template>
<div>
<button @click="onClick">点击输出</button>
</div>
</template>
<script>
//局部导入axxios
//import axios from 'axios'
export default {
data() {
return {
list: [],
};
},
methods: {
onClick() {
console.log(this.list);
},
},
async created() {
//全局导入了axios需要加this,局部的不用this
const res = await this.axios.get("http://hmajax.itheima.net/api/news");
setTimeout(() => {
this.list = res.data.data;
}, 2000);
},
};
</script>
<style lang="less" scoped>
</style>
效果演示
https://i-blog.csdnimg.cn/blog_migrate/e4de4b1d246b707b2a1a9e9b3d62adfd.gif
页:
[1]