Vue综合应用

---

前言

经过Vue、axios的洗礼，现在我们来到了综合应用部分，本部分依照音乐播放器的来综合提升能力
参考视频：黑马程序员

---

哭死，又因为接口挣扎了好久，结果是自己没把Vue和axios的包导进去

一、歌曲搜索

1.按下回车（v-on .enter）
2.查询数据（axios 接口 v-model）
3.渲染数据（v-for 数组 that）

小结：

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

二、歌曲播放

1.点击播放（v-on 自定义参数）
2.歌曲地址获取（接口 歌曲id）
3.歌曲地址设置（v-bind）

小结：

• 自定义参数传参提高代码的复用性，方便快捷

• css复习点：（1）符号实体的使用，图标的获取
  （2）元素布局的设置

• v-bind：动态设置元素属性（响应式的）

三、歌曲封面

1. 点击播放（增加逻辑）
2. 歌曲封面获取（接口 歌曲id）
3. 歌曲封面设置（v-bind）

小结：
可以通过v-bind来设置元素的属性，缩写形式为 :（冒号）。

四、歌曲评论

1. 点击播放（增加逻辑）
2. 歌曲评论获取（接口 歌曲id）
3. 歌曲评论渲染（v-for）

代码如下（示例）：

效果图：

---