VUE快速入门 第四章：综合应用（基于Vue.js悦听播放器）

第四章：综合应用

综合应用-介绍

悦听播放器

 

歌曲搜索：搜索结果显示在左侧列表

歌曲播放：点击按钮播放

歌曲封面：播放歌曲同时，中间封面会同步改变

歌曲评论：右侧显示热评

播放动画：

Mv播放：点击MV弹出遮罩层，播放MV

 

综合应用-音乐查询

1、回车（v-on .enter事件绑定）

2、获取数据（axios接口，v-model获取输入）

3、渲染数据（v-for数组,that）

html: <div class="search_bar">   <img src="images/player_title.png" alt="" />         <!-- 搜索歌曲 -->    <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" /> </div> ---------------------- <ul class="song_list">   <li v-for="item in musicList">     <b>{ {item.name}}</b>  </li> </ul> ----------   <!-- 开发环境版本，包含了有帮助的命令行警告 -->   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   <!-- 官网提供的 axios 在线地址 -->   <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./js/main.js "></script>

/*   1:歌曲搜索接口     请求地址:https://autumnfish.cn/search     请求方法:get     请求参数:keywords(查询关键字) 响应内容:歌曲搜索结果 */   ./js/main.js:  <script>     var app = new Vue({     el: "#player",     data: {       query: "",       // 查询关键字       musicList: [],     // 歌曲数组   },   methods: {     searchMusic: function() {     // 歌曲搜索       var that = this;       axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(         function(response) {  that.musicList = response.data.result.songs; },         function(err) {}     });   </script>

综合应用-音乐播放

1、点击播放（v-on .enter事件绑定，自定义参数）

2、获取歌曲地址（axios接口，v-model获取输入）

3、歌曲地址设置（渲染数据）（）

播放歌曲的本质，就是设置audio标签的src属性为网络地址。<audio src=”">

html: <div class="audio_con">   <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio> </div> ---------------------- ----------   <!-- 开发环境版本，包含了有帮助的命令行警告 -->   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   <!-- 官网提供的 axios 在线地址 -->   <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./js/main.js "></script>

/*   2:歌曲url获取接口