Vue学习笔记05-H5实例百度音乐

Vue学习笔记05-H5实例百度音乐

目录

​​Vue学习笔记01-Vue基础​​​​Vue学习笔记02-Vue组件​​​​Vue学习笔记03-Axios​​​​Vue学习笔记04-Vue路由​​​​Vue学习笔记05-H5实例百度音乐​​​​Vue学习笔记06-Vuex​​​​Vue学习笔记07-Web商城实例​​

Vue实例

25. Vue-实例-音乐列表

示例： src/route.js

import Vue from 'vue'import VueRouter from "vue-router"import Index from "../pages/index" import MusicNav from "../pages/MusicNav" import HotMusic from "../pages/MusicList/HotMusic"import NewMusic from "../pages/MusicList/NewMusic"import KingMusic from "../pages/MusicList/KingMusic"Vue.use(VueRouter);export default new VueRouter({ routes: [ { path: '/', name: 'Index', component: Index, redirect: 'HotMusic', children: [ { path: 'hot', name: 'HotMusic', component: HotMusic}, { path: 'new', name: 'NewMusic', component: NewMusic}, { path: 'king', name: 'KingMusic', component: KingMusic}, ]}, ]});

src/main.js

import Vue from 'vue'import App from './App'import Axios from 'axios'import router from './router'Vue.prototype.$axios = Axios; Vue.prototype.HOST = '/api'Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '' })

src/App.vue

注：App.vue中应使用路由的形式引入，如果使用组件的方式引入index.vue会导致显示两次。

src/pages/index.vue

src/pages/MusicNav.vue

>

组件：src/components/MusicList.vue

>

src/pages/MusicList/HotMusic.vue

>

src/pages/MusicList/HotMusic.vue

>

src/pages/MusicList/KingMusic.vue

>

26. Vue-实例-歌手信息

思路：歌手卡片为一个组件，页面中引用该组件，使用固定数组保存歌手id

（1）src/router/index.js中添加路由

import Vue from 'vue'import VueRouter from "vue-router"import Index from "../pages/index" import MusicNav from "../pages/MusicNav" import HotMusic from "../pages/MusicList/HotMusic"import NewMusic from "../pages/MusicList/NewMusic"import KingMusic from "../pages/MusicList/KingMusic"import SingerInfo from "../pages/Singer/SingerInfo"Vue.use(VueRouter);export default new VueRouter({ routes: [ { path: '/', name: 'Index', component: Index, redirect: '/hot', children: [ { path: 'hot', name: 'HotMusic', component: HotMusic}, { path: 'new', name: 'NewMusic', component: NewMusic}, { path: 'king', name: 'KingMusic', component: KingMusic}, ]}, { path: '/singer/:singerid', name: 'singer', component: SingerInfo}, ]});

（2）创建组件src/components/SingerList.vue

（3）新建页面src/pages/Singer/SingerInfo.vue

（4）新建页面src/pages/Singer.vue

（5）src/pages/index.vue中引入Singer.vue

当前项目代码结构截图

27. Vue-实例-歌曲播放

​​icronfont​​

项目结构梳理

歌曲播放页面

（1）添加路由​​{ path: '/musicplay/:songid', name: 'musicplay', component: MusicPlay},​​ src/route/index.js

import Vue from 'vue'import VueRouter from "vue-router"import Index from "../pages/index" import MusicNav from "../pages/MusicNav" import HotMusic from "../pages/MusicList/HotMusic"import NewMusic from "../pages/MusicList/NewMusic"import KingMusic from "../pages/MusicList/KingMusic"import SingerInfo from "../pages/Singer/SingerInfo"import MusicPlay from "../pages/MusicPlay"Vue.use(VueRouter);export default new VueRouter({ routes: [ { path: '/', name: 'Index', component: Index, redirect: '/hot', children: [ { path: 'hot', name: 'HotMusic', component: HotMusic}, { path: 'new', name: 'NewMusic', component: NewMusic}, { path: 'king', name: 'KingMusic', component: KingMusic}, ]}, { path: '/singer/:singerid', name: 'singer', component: SingerInfo}, { path: '/musicplay/:songid', name: 'musicplay', component: MusicPlay}, ]});

（2）新建播放页面src/pages/MusicPlay.vue

（3）修改src/components/MusicList.vue

>

（4）修改src/components/SingerMusic.vue

>

28. Vue-示例-歌曲播放与歌词

iconfont使用

import "../assets/font/iconfont.css"

在页面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。