搜索歷史展示每一次搜索過,並選中的關鍵字,保存數據到數組。搜索歷史數據是需要在多個組件中共享的,所以保存在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 ...