搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组。搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到search.vue 中,search.vue 监听事件并提交actions改变共享数组,改变vuex ...
建立搜索框组件页面,searchBox,组件接受一个可以自定义传入的placeholder 属性。input v model 双向绑定数据关联到query 中, 在created中监听 query 变量将改变的新值派发给外部父组件,在search.vue 组件中将其引入 search.vue 热门搜索模块,通过search.js 的getHotKey 函数异步获取数据,并渲染,给每个item 上 ...
2017-11-29 17:01 0 1506 推荐指数:
搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组。搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到search.vue 中,search.vue 监听事件并提交actions改变共享数组,改变vuex ...
搜索结果 列表点击跳转到相应的歌手详情页或者 歌曲页面,通过子路由跳转,和singer 组件一样 在suggest.vue 组件判断如果点击的是歌手,则new 一个歌手对象,通过这个对象的id 属性值传递给路由的参数,通过vuex 传递歌手数据 歌曲点击的逻辑和之前选择歌手点击 ...
搜索结果 列表点击跳转到相应的歌手详情页或者 歌曲页面,通过子路由跳转,和singer 组件一样 在suggest.vue 组件判断如果点击的是歌手,则new 一个歌手对象,通过这个对象的id 属性值传递给路由的参数,通过vuex 传递歌手数据 歌曲点击的逻辑和之前选择歌手点击 ...
搜索历史 搜索过的关键词 保存在本地存储 localstorage 中,同时多个组件共享搜索历史数据,将数据存到vuex 中,初始值从本地缓存中取得对应key 的值,没有数据默认为空数组 点击搜索关键词列表值的时候触发将关键词写入vuex 中,搜索结果列表suggest 组件向外派发事件,在需要 ...
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记。 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star。 一、歌手页面布局与设计 需求:联系人列表形式、左右联动的滚动 ...
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记。 上一篇总结了项目概述、项目准备、页面骨架搭建。这一篇重点梳理推荐页面开发。项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star。 一、页面简介 ...
播放器播放模式有三种,顺序播放,单曲循环,随机播放,定义在vuex 中的字段为 mode。点击切换播放模式的图标。切换模式判断是否为随机播放,如果是随机播放模式,则取得sequenceList 列表数 ...
前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识。这一篇主要梳理:项目概况、项目准备、页面骨架搭建。项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star ...