认识Vue框架

喂哥们儿听过Vue么？不是那种普通的JS框架喔。先说说，这儿特别牛在哪儿？就这小子刷起界面来嗖嗖的，说刷就刷，一点不含糊。还特地配备了好用到爆的操作指令和组件，帮你轻松玩转刷界面和渲染功能。更不用提，应对一堆烦心事的动态事件，犯愁什么，它全包。所以哥们儿，想成为前端大神的话，别等了，赶紧用上Vue，好处多着！

认识axios插件

别再费劲了，兄弟们看看Axio这网站客户端神器咋样~上网方便，做Node.js app更是杠杠滴，真心给力用上这个，连Vue项目也毫不费劲，简直像多个得力助手帮你处理api那些繁琐事儿。为啥这货那么牛逼？因为学会用Axio实在太有用，关键时刻还能给你的项目加分！

安装axios插件

npm install axios

想要在Vue项目里用上Axios？直接安装！不管是npm还是yarn都可以搞定！成功导入项目后，就能够向各种网站发出请求了，比如说去网易云音乐搜搜新歌听听呀~可别忘了这关键的一步！

编写Vue组件

首先要安个小助手axios，然后在Vue组件里搞个名叫data的地儿放上我们的空数列songs。搞定后，就可以在mounted阶段用fetchSongs调用下axios，让它去帮我们从网易云音乐API把歌名和歌手的信息搬回来！

yarn add axios

发送HTTP请求

说到找歌这事儿，就得提下fetchSongs这款神器了！它贼方便。我们直接利用axios里的get功能，向网易云音乐API发送请求，很快就能找到歌名和歌词。要是API回个“允许”，歌就在this.songs中等着我们挑选了；若没有回应，误差提示立马弹窗，保证唱错的歌没法蒙混过关！

渲染歌曲列表

  

    
歌曲详情
    

      

        {{ song.name }} - {{ song.artist }}
      
    
  


import axios from 'axios';
export default {
  data() {
    return {
      songs: [],
    };
  },
  mounted() {
    this.fetchSongs();
  },
  methods: {
    fetchSongs() {
      axios.get('https://api.apiopen.top/musicRankingsDetails?type=1')
        .then(response => {
          this.songs = response.data.result;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};

别磨蹭！搞定V-for循环后，用LI标签把搜遍全网找来的歌儿和歌手分门别类地排列好就行。这样轻松操作一番，网易云音乐里找到的所有信息都会一目了然地呈现在眼前，跟逛商场似的，简直太实用了！

注意事项与建议

咱平时编程时，后端就是接API，然后加工成前端能用的数据，比如我这次用网易云音乐的在线API，应该更好理解了？不过注意想要自己学的话，得弄明白API怎么用，同时要遵守保护隐私和遵循法规这两点。当然，新手小伙伴们学习Vue和axios的话，建议先从官网教程开始，打下基础后再实际操作试试看，这样才能学到更多知识嘛～

总结与展望

今天我们就来说说怎么用Vue跟Axios去查网易云音乐歌单详情这个过程挺有意思的，学了还能长知识。无论现在就是想试试看，还是未来上班用得上，都特有用处哦～