Vue2进阶——插槽/ajax问题

<template>
  <div>
    <h1>我的好友列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <img :src="user.avatar_url" alt="用户头像">
        <span>{{ user.login }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      const url = 'https://api.github.com/users';
      // 使用 fetch API 获取数据
      fetch(url)
        .then(response => response.json())
        .then(data => {
          this.users = data;
        })
        .catch(error => {
          console.error('Fetch Error :-S', error);
        });
    }
  }
};
</script>

这个简单的 Vue 2 应用程序示例展示了如何在组件被挂载后通过 fetch API 获取数据，并将其存储在本地状态中以供渲染。这里没有使用 axios 是为了保持示例的简洁性，但在实际项目中 axios 是一个更受欢迎的选择，因为它提供了一些便捷的功能，如自动转换JSON响应。