用Vue.js開發一個電影App的前端介面 | vue js開發app
我們要構建一個什麼樣的App?我們大多數人使用線上流媒體服務(如Netflix)觀看我們最喜歡的電影或者節目。這篇文章將重點介紹如何通過使用vue.js2 建立一個類似風格的電影流媒體WEB互動介面(見上圖)。最終的產品可以去這裡找:https://codepen.io/itslit/full/mvvjzr。注:本文作者HassanDjirdeh,由匯智網(www.hubwiz.com[1],包含很多vue.js的優秀教程)的小智翻譯。儘管Bulma將作為應用的CSS框架,但是本文將主要集中在Vue.js的使用和瀏覽CSS式樣,如果你想跟著學,我設定了一個可以作為開始學習的地方,所有自定義組合,初始資...
我們要構建一個什麼樣的App?我們大多數人使用線上流媒體服務(如Netflix)觀看我們最喜歡的電影或者節目。這篇文章將重點介紹如何通過使用vue.js 2 建立一個類似風格的電影流媒體WEB互動介面(見上圖)。
最終的產品可以去這裡找:https://codepen.io/itslit/full/mvvjzr。
注:本文作者Hassan Djirdeh,由匯智網(www.hubwiz.com[1],包含很多vue.js的優秀教程)的小智翻譯。
儘管Bulma將作為應用的CSS框架,但是本文將主要集中在Vue.js的使用和瀏覽CSS式樣,如果你想跟著學,我設定了一個可以作為開始學習的地方,所有自定義組合,初始資料物件和必要的需要通過CDN引用的外部庫(如Vue-router[2]等),都可以從https://codepen.io/itslit/pen/qmzrev獲得。
App的基本需求
讓我們記下這些基本需求:
介紹(登入)螢幕
頁尾要允許使用者可以選擇自己想要的電影
一個電影螢幕,顯示電影的標題/描述和並且有“立即播放”的提示。
一個電影預告片螢幕,在電影播放時顯示電影的預告片。
可以將電影新增到收藏夾中
我們將建立應用程式,讓頁尾隨時出現,而首頁、電影和電影預告片將共享相同的螢幕。
資料為了簡單起見,我們將從一個簡單/可靠的資料物件(物件)開始,它將作為我們所有元件的主儲存器。這個儲存物件將擁有我們所需要的所有電影資訊,並將集中在克里斯托弗·諾蘭的令人敬畏的電影。下面是資料物件的一部分:
const movies = {
“dunkirk”: {
“id”: ‘dunkirk’
“title”: ‘Dunkirk’,
“subtitle”: ‘Dunkirk’,
“description”: ‘Miraculous evacuation of Allied soldiers from Belgium, Britain, Canada, and France, who were cut off and surrounded by the Ger...