Vue基础教程（210）电影购票APP开发实战之系统运行效果：代码如票，手把手带你用Vue搞出电影APP—

一、为啥偏要跟Vue死磕电影APP？

如果你学Vue还停留在啃文档、抄TodoList，小心变成“理论王者，实战青铜”！电影购票APP这玩意儿，简直是为Vue量身定做的秀场：

响应式刺激体验：座位一点、购物车秒变，数据驱动视图的爽感直接拉满；
组件化高能现场：影片卡片、场次选择、支付弹窗…全是活生生的组件复用好案例；
状态管理初体验：不用Vuex也hold得住，为后续进阶埋好钩子。

说白了，这项目能让你把Vue的核心技能——数据绑定、组件通信、条件渲染——全盘摸透，学完直接塞进简历，香！

二、电影APP长啥样？先瞅一眼成品效果

咱不画饼，直接上图（脑补一下）：

首页：顶部导航栏+海报轮播，影片列表网格排列，每个影片卡片带评分和“购票”按钮；
选座页：屏幕效果图居中，底下是座位矩阵——已售的灰掉、可选的点中变绿、自己选的亮橙色；
购物车：悬浮在右下角，实时显示票数和总价，点开能删改。

关键交互亮点：

选座时，座位图无刷新实时更新——Vue响应式直接立功；
购物车金额随选择自动秒算，告别手动刷新；
影片筛选按“热映”“待映”Tab切换，内容流畅更替。

这些效果背后，全是Vue基础语法的骚操作，接下来咱们直接扒代码！

三、核心代码拆解：Vue基础语法实战全揭秘

1. 影片列表渲染（v-for + :class动态样式）

影片数据长这样：

data() {
  return {
    movies: [
      { id: 1, name: "奥本海默", score: 8.8, poster: "url1", type: "hot" },
      { id: 2, name: "封神", score: 7.9, poster: "url2", type: "hot" },
      { id: 3, name: "志愿军", score: "待映", poster: "url3", type: "coming" }
    ]
  }
}

用v-for循环渲染，加上条件判断显示不同标签：

<div class="movie-list">
  <div v-for="movie in movies" :key="movie.id" class="movie-card">
    <img :src="movie.poster" />
    <h3>{{ movie.name }}</h3>
    <span :class="['score', movie.score === '待映' ? 'coming' : 'hot']">
      {{ movie.score }}
    </span>
    <button @click="buyTicket(movie)">购票</button>
  </div>
</div>

注意这里:class的绑定：动态根据评分类型切换样式——Vue的数据驱动UI就这样悄咪咪实现了！

2. 座位选择心跳时刻（计算属性 + 方法处理）

座位数据设计成二维数组，模拟真实场景：

data() {
  return {
    seats: [
      [{ id: '1-1', status: 0 }, { id: '1-2', status: 1 }], // 0可选 1已售 2已选
      [{ id: '2-1', status: 0 }, { id: '2-2', status: 0 }]
    ],
    selectedSeats: []
  }
}

模板里双层v-for渲染座位图：

<div class="seat-map">
  <div v-for="(row, rowIndex) in seats" :key="rowIndex" class="seat-row">
    <div 
      v-for="seat in row" 
      :key="seat.id"
      :class="['seat', `status-${seat.status}`]"
      @click="selectSeat(seat)">
      {{ seat.id.split('-')[1] }}
    </div>
  </div>
</div>

点击座位触发方法：

methods: {
  selectSeat(seat) {
    if (seat.status === 1) return; // 已售不可选
    const index = this.selectedSeats.findIndex(s => s.id === seat.id);
    if (index > -1) {
      // 已选则取消
      this.selectedSeats.splice(index, 1);
      seat.status = 0;
    } else {
      // 未选则添加
      this.selectedSeats.push(seat);
      seat.status = 2;
    }
  }
}

这里直接修改了seat.status——因为Vue对响应式数据监听，状态一变，视图自动更新！这就是Vue的魔法所在。

3. 购物车实时计算（计算属性大显神通）

购物车不需要单独维护，直接基于selectedSeats计算：

computed: {
  totalPrice() {
    return this.selectedSeats.length * 35; // 假设每张35元
  },
  cartText() {
    const count = this.selectedSeats.length;
    return count ? `购票${count}张 ￥${this.totalPrice}` : '未选座';
  }
}

在模板中直接使用：

<div class="cart">
  <button :class="{ active: selectedSeats.length }">
    {{ cartText }}
  </button>
</div>

计算属性的好处：依赖数据变，结果自动更新——免手动维护，真香！

四、开发避坑指南：新手常翻车点

v-for忘了写:key：控制台会警告，列表更新可能紊乱——用唯一id当key！
响应式数据直接赋值：数组用push、对象用Vue.set，别直接=`[]（可用this.movies = [...newList]`）。
方法内this指向跑偏：箭头函数慎用，确保this指向组件实例。
组件通信懵圈：父子用props+$emit，兄弟用事件总线或Vuex。

五、完整示例+源码获取

由于篇幅，这里贴关键代码，但完整可运行示例已打包（包含Vue组件拆分、路由配置、样式源码）。

项目结构如下：

movie-app/
  ├── src/
  │    ├── components/
  │    │     ├── MovieList.vue
  │    │     ├── SeatMap.vue
  │    │     └── ShoppingCart.vue
  │    ├── views/
  │    │     ├── Home.vue
  │    │     └── SelectSeat.vue
  │    └── App.vue
  └── public/index.html

获取方式：在评论区喊“Vue电影票我全都要！”（开玩笑~），直接私信我发你GitHub地址，代码拉下来npm install && npm run serve就能跑！