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 () { fetch('https://api.github.com/users').then(res=>{ return res.json(); }).then(res=>{ this.dataList = res; }) } } }; </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> 浏览器点击 获取数据 按钮
