跟我一起做一个vue的小项目（九）

跟我一起做一个vue的小项目（二）

这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue <template> <div class="header"> <div class="header-left">返回</div> <div class="header-input">输入…

接下来我们进行的是城市选择页面的路由配置添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/city/City' Vue.use(Router) // 导出一组路由配置项 export default new Router({ ro…

跟我一起做一个vue的小项目（七）

先看下我们所做项目的效果这些数据都是我们在data中定义的,不是从后端数据中请求的.那么接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相同,但是单个的组件去进行数据请求的话,那么ajax请求还是太多了,我们在home.vue中发起一个请求我们使用mock数据,在static中创建一个mock文件夹写入json文件 vue中提出了一个转发功能,我们写的接口路径就可以直接同线上的一致 { "ret":true, "…

跟我一起做一个vue的小项目（五）

接下来我们要做的是热门推荐页面,我们写一个推荐组件使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧使用了min-width:0 我们来看完整的代码和效果吧 //src\pages\home\components\Recommend.vue <template> <div> <div class="recommend-title">热销推荐</div> <ul> <l…

跟我一起做一个vue的小项目（APPvue2.5完结篇）

先放一下这个完结项目的整体效果下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页我们先看效果在处理详情页向下移动过程中,header页出现,我们使用的是监听滚动的方法,然后动态传入样式 //src\pages\detail\components\Header.vue <template> <div> <router-link class="header-abs" tag="di…

跟我一起做一个vue的小项目（四）

接下来我们进行的是轮播页面下面的导航页的开发我们需要的是实现轮播页下面的图标,并且实现轮播效果这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这个就是一页轮播如果大于8个,我们要计算是显示几个轮播页.再根据这个轮播页我们去渲染的数据 //icons.vue <template> <div class="icons"> <swiper>  <s…

跟我一起做一个vue的小项目（十一）

接下来我们进行的是详情页动态路由及banner布局先看页面的效果下面是代码部分 <template> <div> <div class="banner"> <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg" alt="" class="…

跟我一起做一个vue的小项目（十）

接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul class="list"> <li class="item" v-for="item of letters" @click="handleLetterClick" @touchstart="handleTouc…

跟我一起做一个vue的小项目（三）

接下来我们进行轮播的开发安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在main.js中添加 //main.js import VueAwesomeSwiper from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css') Vue.use(VueAwesomeSwiper) 在components里面写入S…