【vue项目实战】Vue工程化项目--猫眼电影移动端（二）

vue工程化第二节

• 添加内容和样式
• 使用axios请求数据，参考这里
• 添加局部左右滑动（即将上映页），参考 （左右滑动也可使用插件）
• 组件化开发，相同代码可以提取出来作为一个组件来调用，减少代码量，提高代码可复用性
• 路由传值跳转电影详情页，参考
• 本节完整demo参考
• 第三节传送

提高代码可复用性

相同代码单独作为一个组件，提高代码可复用性。

下面两个界面的红色框框，样式和内容都差不多，可以单独作为一个组件来写。

步骤：

1. 首先在 components 下新建文件 movieList.vue ，然后写入以下代码

   <template>
     <div>
       <div @click="$router.push({name:'movieDetail'})" class="movie-list">
         <div class="movie-img">
           <img :src="mitem.img.replace('w.h','128.180')" alt>
         </div>
         <div class="right-info">
           <ul class="movie-info">
             <li class="name">{
       {mitem.nm}}</li>
             <li v-if="mitem.globalReleased && mitem.sc!==0" class="score">
               观众评
               <span>{
       {mitem.sc}}</span>
             </li>
             <li style="font-size: 14px;color: #888" v-if="mitem.globalReleased && mitem.sc==0">暂无评分</li>
             <li v-if="!mitem.globalReleased" class="score">
               <span>{
       {mitem.wish}}</span> 想看
             </li>
             <li class="actor">{
       {mitem.star}}</li>
             <li class="showinfo">{
       {mitem.showInfo}}</li>
           </ul>
           <div class="btn">