vue综合实例——音乐播放器（悦听player）

最新推荐文章于 2024-06-07 09:45:28 发布

别影响我打怪

最新推荐文章于 2024-06-07 09:45:28 发布

阅读量1.3k

点赞数 2

分类专栏： Vue 文章标签： vue javascript html

本文链接：https://blog.csdn.net/weixin_43370373/article/details/118491654

版权

本文详述了使用Vue构建音乐播放器的过程，包括歌曲搜索、播放、封面展示、评论功能及播放动画。在实现过程中，强调了处理复杂服务器数据的注意事项，如何利用审查元素定位DOM，以及在Vue中使用v-bind和v-for指令操作属性和生成列表。总结指出，理解不同接口数据需求的重要性，以及在页面复杂时如何借助审查元素进行调试。

摘要由CSDN通过智能技术生成

1.歌曲搜索
2.歌曲播放
3.歌曲封面
4.歌曲评论
5.播放动画
6.mv播放

在这里插入图片描述

服务器返回的数据比较复杂时，获取的时候需要注意层级结构
通过审查元素快速定位到需要操纵的元素

在这里插入图片描述

歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

在这里插入图片描述

在vue中通过v-bind操纵属性
本地无法获取的数据，基本都会有对应的接口

在这里插入图片描述

在vue中通过v-for生成列表

在这里插入图片描述

在这里插入图片描述

总结：
不同的接口需要的数据是不同的，文档的阅读需要仔细
页面结构复杂之后，通过审查元素的方式去快速定位相关元素
响应式的数据都需要定义在data中定义

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/musicplayer.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <

最低0.47元/天解锁文章

别影响我打怪

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
vue综合实例——音乐播放器（悦听player）

1.歌曲搜索2.歌曲播放3.歌曲封面4.歌曲评论5.播放动画6.mv播放歌曲搜索1.按下回车(v-on,enter)2.查询数据(axios接口v-model)3.渲染数据(v-for 数组 that)服务器返回的数据比较复杂时，获取的时候需要注意层级结构通过审查元素快速定位到需要操纵的元素歌曲播放1.点击播放(v-on 自定义参数)2.歌曲地址获取(接口歌曲id)3.歌曲地址设置(v-bind)歌曲id依赖歌曲搜索的结果，对于不用的数据也需要.
复制链接

扫一扫

专栏目录