vue笔记——综合应用（音乐播放器）

综合应用

音乐播放器网页实现

接口文档是什么请求方法，axios就用什么方法

1.歌曲搜索

html文件

<div class="wrap">
        <!--播放器主体区域-->
        <div class="play_wrap" id="player">
            <input type="text" autocomplete="off" v-model="query"
            @keyup.enter="searchSong">
            <ul class="songs_list">
                <li v-for="item in songsList">
                    <a href="javascript:;"></a>
                    <b>{
  { item.name }}</b>
                    <span><i></i></span>
                </li>
            </ul>
        </div>
    </div>
    <!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--导入main.js文件-->
    <script src="main.js"></script>

main.js文件

var app = new Vue({
   
    el:"#player",
    data:{
   
        query:"",//查询
        songsList:[],
    },
    methods:{
   
        searchSong:function(){
   
            var that=this;
            axios.get("https://autumnfish.cn/search?keywords="+this