Home.vue

<template><div><home-header></home-header><home-swiper></home-swiper><home-icons></home-icons><home-recommend></home-recommend><home-weekend></home-weekend></div>
</template><script>
// 局部组件需要插入到components中，由于键和值都是一样，所以写成HomeHeader
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
// 在文件夹components新建Recommend和Weekend
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'export default {name: 'Home',components: {HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend}
}
</script><style>
</style>

Recommend.vue

<template><div><div class="title">热销推荐</div><ul><liclass="item border-bottom"v-for="item of recommendList":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></li></ul></div>
</template><script>
export default {name: 'HomeRecommend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_140x140_73fda71d.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}]}}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff
</style>

Weekend.vue

template><div><div class="title">周末去哪儿</div><ul><liclass="item border-bottom"v-for="item of recommendList":key="item.id"><div class="item-img-wrapper"><img class="item-img" :src="item.imgUrl" /></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div>
</template><script>
export default {name: 'HomeWeekend',data () {return {recommendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/source/1505/9f/f585152825459.jpg_r_640x214_5d46e4cc.jpg',title: '大连圣亚海洋世界',desc: '浪漫大连首站，浪漫的海洋主题乐园'}]}}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 33.9%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis()
</style>

Ajax请求

Vue本身不支持ajax请求，需要使用“axios”的第三方插件（2.0），axios是基于promise的http请求客户端，用来发送请求，是Vue2.0推荐使用的，同时不再对vue-resource进行更新和维护。也可以使用vue-resource进行跨域请求。

安装：npm install axios --save

在Home.vue

<template><div><home-header :city="city"></home-header><home-swiper :list="swiperList"></home-swiper><home-icons :list="iconList"></home-icons><home-recommend :list="recommendList"></home-recommend><home-weekend :list="weekendList"></home-weekend></div>
</template><script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default {name: 'Home',components: {HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend},data () {return {city: '',swiperList: [],iconList: [],recommendList: [],weekendList: []}},methods: {getHomeInfo () {// 接口路径是/api/index.json，需要在webpack config目录下的index.js中的proxyTable设置axios.get('/api/index.json').then(this.getHomeInfoSucc)},getHomeInfoSucc (res) {console.log(res)res = res.dataif (res.ret && res.data) {const data = res.datathis.city = data.citythis.swiperList = data.swiperListthis.iconList = data.iconListthis.recommendList = data.recommendListthis.weekendList = data.weekendList}}},// 当组件挂载是的钩子函数mountedmounted () {this.getHomeInfo()}
}
</script><style>
</style>

在static目录下创建接口的json数据。访问本地json的话,本地json必须放到static下面

配置了json，可以直接在8080端口访问数据，放回的原页面。

在一般的项目，不可能直接将static路由暴露，需要重定向，在config/index.js配置即可

在配置文件发生改变，需要重启应用

Header.vue

<template><div class="header"><div class="header-left"><div class="iconfont back-icon">&#xe624;</div></div><div class="header-input"><span class="iconfont">&#xe602;</span>输入城市/景点/游玩主题</div><div class="header-right">{{this.city}}<span class="iconfont arrow-icon">&#xe658;</span></div></div>
</template><script>
export default {name: 'HomeHeader',props: {city: String}
}
</script><style lang="stylus" scoped>
@import '~styles/varibles.styl';
.headerdisplay: flexline-height: 0.86remheight: 0.86rembackground: $bgColorcolor: #fff.header-leftwidth: 0.64remfloat: left.back-icontext-align: centerfont-style: 0.4rem.header-inputflex: 1background: #fffheight: 0.64remline-height: 0.64remmargin-top: 0.12remmargin-left: 0.2remboirder-radius: 0.1remcolor: #ccc.header-rightwidth: 1.24remfloat: righttext-align: center.arrow-iconmargin-left: -0.04remfont-size: 0.24rem
</style>

Icons.vue

<template><div class="icons"><swiper :options="swiperOption"><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="icon"v-for="item of page":key="item.id"><div class='icon-img'><img class='icon-img-content' :src='item.imgUrl' /></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide></swiper></div>
</template><script>
export default {name: 'HomeIcons',props: {list: Array},data () {return {swiperOption: {autoplay: false}}},computed: {pages () {const pages = []this.list.forEach((item, index) => {const page = Math.floor(index / 8)if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconsmargin-top: .1rem.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColorellipsis()
</style>

Recommend.vue

<template><div><div class="title">热销推荐</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></li></ul></div>
</template><script>
export default {name: 'HomeRecommend',props: {list: Array}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff
</style>

Swiper.vue

<template><div class="wrapper"><swiper :options="swiperOption" v-if="showSwiper"><swiper-slide v-for="item of list" :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide><div class="swiper-pagination"  slot="pagination"></div></swiper></div>
</template><script>
export default {name: 'HomeSwiper',props: {list: Array},data () {return {swiperOption: {pagination: '.swiper-pagination',loop: true}}},computed: {showSwiper () {return this.list.length}}
}
</script><style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25%background: #eee.swiper-imgwidth: 100%
</style>

Weekend.vue

<template><div><div class="title">周末去哪儿</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><div class="item-img-wrapper"><img class="item-img" :src="item.imgUrl" /></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div>
</template><script>
export default {name: 'HomeWeekend',props: {list: Array}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titleline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 37.09%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis()
</style>

参考课程：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

请一键三连！！！！！

六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求相关推荐

六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
三十八、Vue项目上手 | 用户管理系统（上篇）
@Author:Runsen @Date:2020/7/7 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
Vue项目首页---开发周末游组件
<template><div><div class="title">周末去哪儿</div><ul><li clas ...
Vue项目首页-开发周末游组件（7-7）
开发周末游组件 <template><div><div class="title">周末去哪</div><ul>< ...
JavaScript学习（六十八）—表单校验案例
JavaScript学习(六十八)-表单校验案例学习内容 (一).如何获取页面的元素-利用id获取格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...
问题六十八：光照模型（Light model）——关于“环境光”模型的补充
之前在"问题六十八:着色模型(shading model)(2)--光照模型(Light model)"中已经对Ambient Model(环境光光照模型)进行了介绍,但是感觉推导 ...
[转载]六十八个经典故事
转自:http://www.cnblogs.com/flying_bat/archive/2004/11/04/60492.aspx 一. 用人之道去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客 ...
信息系统项目管理师必背核心考点（六十八）数字证书、数字签名
科科过为您带来软考信息系统项目管理师核心重点考点(六十八)数字证书.数字签名和CA认证中心,内含思维导图+真题 [信息系统项目管理师核心考点]数字证书 1.具有不可抵赖性的特征(一段电子文档) 2.包 ...
[转] 身为管理者会讲的六十八个故事
一.用人之道去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙. 弥乐佛热情快乐,所以来的人非常多,但 ...

六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求

Home.vue

Recommend.vue

Weekend.vue

Ajax请求

六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求相关推荐

最新文章

热门文章