vue.js 构建项目_使用Vue.js构建电影播放器​​（代码挑战5的解决方案）

vue.js 构建项目

Last week, we got on the code challenge #5, in which we were required to create a simple movie player using data of movies from a provided API.

上周，我们遇到了代码挑战＃5 ，其中要求我们使用提供的API中的电影数据创建一个简单的电影播放器​​。

You can check out awesome entries for the challenge using the hashtag #scotchchallenge on twitter or check the comments under the post. In this post, we shall be solving the challenge using Vue.js.

您可以在Twitter上使用#scotchchallenge标签来查看挑战的真棒条目，或查看帖子下的评论。 在本文中，我们将使用Vue.js解决挑战。

为什么选择Vue.js？ ( Why Vue.js? )

Vue is a popular and fast-growing progressive JavaScript framework that offers the much-required flexibility and simplicity to build out awesome user interfaces.

Vue是一种流行且快速增长的渐进式JavaScript框架，它提供了构建出色的用户界面所需的灵活性和简便性。

基地 ( The Base )

The base code consists of HTML and CSS, written to structure and style the movie player.

基本代码由HTML和CSS组成，用于构造和设置影片播放器的样式。

HTML (HTML)

The app is structured to have a container div in which we place the video display and the thumbnails to select the video as separate child divs.

该应用程序的结构具有容器div，我们在其中放置视频显示和缩略图以选择视频作为单独的子div。

<div class="videos-container" id="app">
  <div class="video-player">
  </div>
  <div class="video-choices">
  </div>
</div>

CSS (CSS)

In styling the app, CSS was used with the SASS variant and Flexbox was mostly used to position the elements accurately.

在设计应用程序样式时，CSS与SASS变体一起使用，而Flexbox主要用于精确定位元素。

body {
     
  background: #1e3c72;
  background: linear-gradient(to right, #1e3c72, #2a5298);
  padding: