Vue作为一个目前很火的前端框架，学习基础需要HTML，CSS，JavaScript。有了这些基础基本能在几个小时之内入门，一些标签根本没必要死记硬背，这篇笔记作为一个引导。
1.快速入门视频 https://www.bilibili.com/video/BV12J411m7MG
2.视频代码
资料参考：https://github.com/zj-196/VUE/tree/master/VUE
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>悦听player</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="wrap"> <!-- 播放器主体区域 --> <div class="play_wrap" id="player"> <div class="search_bar"> <img src="images/player_title.png" alt="" /> <!-- 搜索歌曲 --> <input type="text" autocomplete="off" v-model="musicName" @keyup.enter="searchMusic" /> </div> <div class="center_con"> <!-- 搜索歌曲列表 --> <div class='song_wrapper'> <ul class="song_list"> <li v-for="item in musicList"> <a href="javascript:;" @click="playMusic(item.id)"></a> <b>{{item.name}}</b> <span><i @click="getMV(item.mvid)" v-if="item.mvid!=0"></i></span> </li> </ul> <img src="images/line.png" class="switch_btn" alt=""> </div> <!-- 歌曲信息容器 --> <div class="player_con" :class="{playing:isPlaying}"> <img src="images/player_bar.png" class="play_bar" /> <!-- 黑胶碟片 --> <img src="images/disc.png" class="disc autoRotate" /> <img :src="musicCover" class="cover autoRotate" /> </div> <!-- 评论容器 --> <div class="comment_wrapper"> <h5 class='title'>热门留言</h5> <div class='comment_list'> <dl v-for="item in hotCommentList"> <dt><img :src="item.user.avatarUrl" alt=""></dt> <dd class="name">{{item.user.nickname}}</dd> <dd class="detail"> {{item.content}} </dd> </dl> </div> <img src="images/line.png" class="right_line"> </div> </div> <div class="audio_con"> <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio> </div> <div class="video_con" style="display: none;" v-show="isShow"> <video controls="controls" :src="mvUrl"></video> <div class="mask" @click="hide"></div> </div> </div> </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> </body> </html>
js
/* 1:歌曲搜索接口 请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keywords(查询关键字) 响应内容:歌曲搜索结果 2:歌曲url获取接口 请求地址:https://autumnfish.cn/song/url 请求方法:get 请求参数:id(歌曲id) 响应内容:歌曲url地址 3.歌曲详情获取 请求地址:https://autumnfish.cn/song/detail 请求方法:get 请求参数:ids(歌曲id) 响应内容:歌曲详情(包括封面信息) 4.热门评论获取 请求地址:https://autumnfish.cn/comment/hot?type=0 请求方法:get 请求参数:id(歌曲id,地址中的type固定为0) 响应内容:歌曲的热门评论 5.mv地址获取 请求地址:https://autumnfish.cn/mv/url 请求方法:get 请求参数:id(mvid,为0表示没有mv) 响应内容:mv的地址 */ var app = new Vue({ el:"#player", data:{ //歌曲名称 musicName:"", //歌曲列表 musicList:[], //歌曲地址 musicUrl:"", //歌曲封面 musicCover:"", //热门评论 hotCommentList:[], //歌曲MV mvUrl:"", //封面状态 isPlaying:false, // 遮罩层状态 isShow:false }, methods:{ //搜索歌曲 searchMusic:function(){ var that = this; axios.get("https://autumnfish.cn/search?keywords="+this.musicName) .then(function(response){ //console.log(response.data.result.songs) that.musicList = response.data.result.songs; },function(err){}) }, //播放歌曲 playMusic:function(musicId){ var that = this; axios.get("https://autumnfish.cn/song/url?id="+musicId) .then(function(response){ //console.log(response.data.data[0].url) that.musicUrl = response.data.data[0].url; },function(err){}) //歌曲封面 axios.get("https://autumnfish.cn/song/detail?ids="+musicId) .then(function(response){ //console.log(response.data.songs[0].al.picUrl) that.musicCover = response.data.songs[0].al.picUrl; },function(err){}) //热门评论 axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId) .then(function(response){ //console.log(response.data.hotComments) that.hotCommentList = response.data.hotComments; },function(err){}) }, // 歌曲播放 play: function() { // console.log("play"); this.isPlaying = true; }, // 歌曲暂停 pause: function() { // console.log("pause"); this.isPlaying = false; }, // 播放mv getMV:function(mvid) { var that = this; axios.get("https://autumnfish.cn/mv/url?id="+mvid).then( function(response) { console.log(response.data.data.url); that.isShow = true; that.mvUrl = response.data.data.url; }, function(err) {} ); }, hide:function() { this.isShow = false; } } })