概述：本教程仅实现了功能逻辑代码，不包含前端CSS样式。 工具：IntelliJ IDEA 2018
一，导入开发必要的环境
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的在线axios地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>二，设计页面展示效果
<div id="app"> <input type="text" v-model="name" placeholder="请输入歌手或者歌曲名" @keyup.enter="searchAll"> <button @click="searchAll">搜索</button><br> <audio ref="audio" v-bind:src="musicUrl" controls autoplay loop></audio> <ul> <li v-for="item in songs"> {{item.name}} <a href="javascript:;" @click="playMusic(item.id)">播放</a> </li> </ul> </div>三，填写点击响应事件
<script> var app = new Vue({ el:"#app", data:{ name:"", songs:[], musicUrl:"" }, methods:{ searchAll:function () { var that = this; axios.get("https://autumnfish.cn/search?keywords="+this.name) .then(function (response) { console.log(response.data.result.songs); that.songs = response.data.result.songs; }) .catch(function (err) { }) }, playMusic:function (musicId) { var that = this; axios.get("https://autumnfish.cn/song/url?id="+musicId) .then(function (response) { console.log(response); that.musicUrl = response.data.data[0].url; }).catch(function (err) { }) } } }) </script>四，效果展示：
