![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
去哪儿项目
qq_36158581
这个作者很懒,什么都没留下…
展开
-
12-2-Detail组件开发-递归组件
使用递归组件实现详情页列表 1.Detail组件中 父组件中定义要显示的列表页数据list,并动态绑定到detail-list子组件上 <div> <detail-banner></detail-banner> <detail-header></detail-header> <div class="content"> <detail-list :list="list"></de原创 2021-07-08 21:34:12 · 220 阅读 · 0 评论 -
12-1-Detail组件开发-图片展示和点击轮播
点击首页热销推荐能进入相应页面查看详情原创 2021-07-07 21:35:28 · 204 阅读 · 1 评论 -
11-keepalive的使用
城市选择页面的请求只发送一次,选择的城市与上次缓存的不同时才再次发送首页的请求 1.App组件中 使用keep-alive将路由包裹进行缓存,首页的请求和城市选择页面的请求都只发送一次 <template> <div id="app"> <!-- 显示当前路由地址所对应的内容 --> <keep-alive> <router-view/> </keep-alive> </div>原创 2021-07-07 20:04:46 · 143 阅读 · 0 评论 -
10-localStorage的使用
解决城市选择页面选择城市后回到首页刷新显示的还是默认城市上海的问题 用户选择城市后,下一次登录应该显示上一次选择的城市, 使用localStorage存储city的值,下一次登录优先使用localStorage中存储的值 let deaultCity = '上海' try { if (localStorage.city) { deaultCity = localStorage.city } } catch (error) {} export default new Vuex.Store({原创 2021-07-06 22:03:39 · 329 阅读 · 0 评论 -
09-Home组件和City组件的页面联动
首页的当前城市和城市选择页面的当前城市联动 使用vuex管理两个页面的都用到的数据,之前都是同一个页面的父子组件通讯。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 1.创建一个store文件夹,存放页面共享的数据 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 import Vue from 'v原创 2021-07-06 21:39:12 · 134 阅读 · 1 评论 -
08-City组件开发-搜索功能实现
输入框内输入城市名字或拼音显示对应城市 1.City组件中 为子组件绑定cities属性,值是父组件中的数据"cities" <template> <div> <city-header></city-header> <city-search :cities="cities"></city-search> <city-list :cities="cities" :hotCities="hotCities原创 2021-07-05 22:13:58 · 131 阅读 · 0 评论 -
07-City组件开发-点击/滑动字母显示对应城市区域
点击城市列表页的字母显示对应的城市区块 1.Alphabet组件中(子) 确认点击的是哪个字母,传递给父组件City,是子传父使用$emit <template> <div class="list"> <div class="item" v-for="item in letters" :key="item" :ref="item" @click="handleLetterClick" @touchstart="handleTouchStart" @t原创 2021-07-04 22:22:40 · 5043 阅读 · 0 评论 -
06-1-City组件开发-CityHeader
点击首页的城市选择跳转到城市列表页 1.HomeHeader组件中 使用router-link to=实现点击相应标签跳转到路由为/city对应的页面 <router-link to="/city"> <div class="header-right"> {{this.city}} <span class="iconfont arrow-icon"></span> </div> </r原创 2021-07-03 20:53:25 · 169 阅读 · 0 评论 -
05-首页父子组件间传值
父组件向子组件传值 1.Home.vue组件中 在data中定义要传递给子组件的数据 export default { name: 'Home', components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend }, data () { return { city: '', swiperList: [], iconLis原创 2021-07-02 22:03:41 · 86 阅读 · 1 评论 -
04-Ajax获取Home页数据
生命周期 1.安装axios依赖 2.Home组件中引入axios模块 3.在mounted钩子函数中发送Ajax请求原创 2021-07-02 21:09:33 · 77 阅读 · 0 评论 -
03-3-Home组件开发-HomeIcons
Home页图标显示 1.根据图标个数确定图标轮播页数 利用computed计算属性,将每页显示的图标信息存放在对应页面的数组中 computed: { pages () { const pages = [] this.iconList.forEach((item, index) => { const page = Math.floor(index / 8) //0 1 if (!pages[page]) { page原创 2021-07-01 20:32:32 · 103 阅读 · 0 评论 -
03-2-Home组件开发-HomeSwiper
Home页轮播图 1.安装轮播图依赖 注意:版本问题 2.在main.js中引入项目依赖 3.在Home.vue中导入轮播图子组件 4.在Swiper.vue中编写轮播图的样式和业务逻辑 轮播图的属性放在对象swiperOption中,比如:分页器的显示、循环 要轮播的图片放在数组swiperList中,在模板中使用v-for指令遍历该数即可实现对应图片展示 ...原创 2021-06-30 21:32:12 · 218 阅读 · 0 评论 -
02-项目文件解释
文件说明 1.index.html 是项目默认显示的页面 id=“app” 2.src中的App.vue是项目的根组件,页面上的其他组件都挂载在其template中; main.js是项目的入口文件,新建vue实例el:#app,规定了页面包含哪些文件和组件; 3.router中的 index.js是路由配置文件,存放路由规则,即路由对应的相应vue组件; 单页面与多页面应用 1.多页应用:页面每次跳转,都要发一个HTTP请求 2.单页应用:不用发HTTP请求 ...原创 2021-06-29 21:12:43 · 98 阅读 · 0 评论 -
03-1-Home组件开发-HomeHeader
home页头部开发 安装开发所需的样式 注意:版本问题,可能会导致打包时报错 Header.vue中使用stylus设置样式 (1)使用lang属性; (2)将常用的属性,背景颜色可能在多个页面中都会用到,可将其放在varibles文件中,便于统一管理; (3)在一个css中引用另一个css,在路径前加一个波浪线~; (4) 为简化路径,可将常用的文件设置别名,在build>webpack.base.conf.js中添加即可; 使用iconfont网站管理项目所需图标 (1)下载所需图标,点击下原创 2020-12-12 15:31:45 · 308 阅读 · 0 评论 -
01-vue-cli环境配置
新建项目 查看项目运行端口 上传到仓库 在 git bash 命令窗口运行原创 2020-12-10 21:15:42 · 64 阅读 · 0 评论