vue3.x axios使用

 

安裝axios

npm install axios --save-dev 

App.vue

<template> <div id="app"> <Example></Example> </div> </template> <script>  import Example from './components/Example' export default { name: 'App', components:{ Example } } </script> <style scoped> </style> 

Example.vue

<template> <div id="example"> <button @click="getData">獲取數據</button> <ul> <li v-for="data in dataList" :key="data.id"> <h3>{{data.login}}</h3> <img :src="data.avatar_url" /> </li> </ul> </div> </template> <script> import axios from 'axios'; export default { name: "Example", data:function(){ return { dataList:[] } }, methods:{ getData:function () { axios.get('https://api.github.com/users') .then(res=>{ this.dataList = res.data; }) .catch(err=>{ console.log(err); }) } } }; </script> <style scoped> #example{ text-align: center; } #example p{ text-align: center; color:#fff; background-color: #0c63e4; } #example ul { list-style: none; } #example ul li { width: 50%; margin: 0 auto; background-color: #ccc; } #example li img{ width:100px; height: 100px; } </style> 

瀏覽器點擊 獲取數據 按鈕