一、Vue3.x中使用Axios请求远程真实Api接口数据
https://github.com/axios/axios
-
安装
npm install axios --save 或者 yarn add axios 或者 cnpm install axios --save
-
引入使用
<template> <div class="home"> <button @click="getData">News组件获取数据</button> <ul> <li v-for="(item,index) in list" :key="index"> { { item.aid }}--{ { item.title }} </li> </ul> </div> </template> <script> // import axios from 'axios'; export default { name: "", data() { return { list: [] } }, methods: { getData() { let api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=5"; this.Axios.get(api).then((response) => { console.log(response.data.result); this.list = response.data.result; }).catch((error) => { console.log(error); }) } }, mounted() { this.Storage.set("username", "张三111"); console.log(this.Storage.get("username")); } } </script> <style scoped> </style>
二、Vue3.x全局绑定Axios
vue3.x中全局绑定属性参考https://v3.vuejs.org/api/application-config.html#warnhandler
修改项目入口main.js文件
import {createApp} from 'vue'
import App from './App.vue'
import A