vue实现酒店案例
Vue实现酒店案例的关键步骤
搭建Vue项目结构
使用Vue CLI创建项目基础框架，安装Vue Router管理页面路由，Vuex进行状态管理。推荐目录结构按功能模块划分，如/views存放酒店列表、详情页等组件。
酒店数据获取与展示
通过Axios调用后端API接口获取酒店数据。采用分页加载优化性能，使用v-for渲染酒店列表卡片，卡片包含图片轮播、基础信息、价格标签等元素。
实现筛选与排序功能
在Vuex中定义筛选条件（价格区间、星级、设施等），通过计算属性动态过滤列表。排序功能可采用下拉选择器触发Array.sort()，支持按价格、评分等维度排序。
酒店详情页开发
设计独立路由/hotel/:id，通过动态路由参数获取酒店ID。页面布局采用分段式结构：顶部图片画廊、基本信息区、房型列表、设施服务、用户评价模块。
交互优化技巧
- 使用
<transition>实现页面切换动画 - 房型选择采用折叠面板展示详情
- 地图组件集成（如高德API）显示酒店位置
- 收藏功能通过Vuex持久化存储
核心代码示例
酒店卡片组件
<template>
<div class="hotel-card">
<el-carousel :interval="4000" height="180px">
<el-carousel-item v-for="(img,idx) in hotel.images" :key="idx">
<img :src="img" class="hotel-image">
</el-carousel-item>
</el-carousel>
<div class="info">
<h3>{{ hotel.name }}</h3>
<el-rate v-model="hotel.star" disabled></el-rate>
<p class="price">¥<span>{{ hotel.minPrice }}</span>起</p>
</div>
</div>
</template>Vuex状态管理
const store = new Vuex.Store({
state: {
hotels: [],
filters: {
priceRange: [0, 2000],
stars: []
}
},
getters: {
filteredHotels: state => {
return state.hotels.filter(hotel => {
return hotel.price >= state.filters.priceRange[0] &&
hotel.price <= state.filters.priceRange[1]
})
}
}
})性能优化建议
图片懒加载
使用vue-lazyload插件延迟加载图片，减少初始请求压力。配置示例：
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require('@/assets/loading.gif')
})分页加载数据 滚动到底部时自动加载下一页，避免一次性请求过多数据：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
this.loadNextPage()
}
})缓存API响应 对静态数据使用localStorage缓存，设置合适的过期时间。动态数据可采用内存缓存策略，减少重复请求。
