完成情况

完成动画样式学习
首页具体开发
1.头部完成（css布局为重）
2.页面滚动栏完成（外部方法的使用为重,解决溢出问题）
3.模块图标完成（css布局为重）
4.热门推荐完成（css布局为重）
5.周末推荐完成（css布局为重）
用axios进行后台模拟传递数据动态显示

重点以及特殊问题记录

1.首页头部问题

利用iconfont提供的css，以及一些配置对图标进行配置，更加方便快捷，在使用时要对css中的位置进行重新定位，否则会出现图片丢失

@font-face {font-family: "iconfont";src: url('./iconfont/iconfont.eot?t=1518407379870'); /* IE9*/src: url('./iconfont/iconfont.eot?t=1518407379870#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXMAAsAAAAACGwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kg6Y21hcAAAAYAAAABwAAABsv+M04hnbHlmAAAB8AAAAc8AAAIM5/cy7mhlYWQAAAPAAAAALwAAADYQbaOmaGhlYQAAA/AAAAAcAAAAJAfeA4ZobXR4AAAEDAAAABMAAAAUE+kAAGxvY2EAAAQgAAAADAAAAAwBPAGkbWF4cAAABCwAAAAeAAAAIAEUAF1uYW1lAAAETAAAAUUAAAJtPlT+fXBvc3QAAAWUAAAANgAAAEebMznXeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYm7438AQw9zM0AAUZgTJAQAp9Ay8eJzFkbENgDAMBM8JIIQYg5KKCaiZhYqKib0GfGIKmIC3Lnq/HCVKgBbIYhYN2IFRtCu1mmeGmjes6gd6kur0yRffrkvZ24dMc1HFZ+1NMh2/yf47+quxruvT6cU5H3RFn4LyI74EZca3gHQD3FMV3HicNZC7ixNRFMbvd29m5k4ek+TOe5LJ5GFmdlkd2Bgni49slIVFERSsLP0DtJM0FgERLBSSShsbEaw2tQurEgRbexsRLfZPsJr1JrCXc36cwzl8fOcShZCz3+yEecQkW2SXHJD7hEDdQdegITrJMKU7sDuK7VoGS3pJR+t1U3YDble1nEE2jF1VU6sw0MLlziBLUprgynBMr2HghIDfCB6IflOwOYpe0nqR36HvYUe9ZnV8Kb99cd8atE0+LQvhC/GKq4rCKS1UDTx2HV3Ri2r+QakG9km0TSOU/SS4+7DSbohHL4dPwr6rA7MZzEbb+LhfD+oyngWOKXytVuFeUOldsDD9W/LMchj/IfLRNdiSHhMhryVmZ+BI99J7EieIs1Hm7r6hP6ItQOTvzD1fV/K3de5ZDv203QrNPPa4UDl++XtmFVJK5tmM/mPPpR7RoVou1l8itYYjZCno9/zA9fCFOzWe3+IaPpd4xKb5dX/i54e8bnMcc0fHt1KkbaxJva/sKZuQEnFJj5B+imSMUQuusSlka0BrQYnHcCI4BqTxn0enhcLp0XLN5WJVKKwW8zXxusjskN/csCxn53uT8435YnW11KyheG/D/0+vYL4AeJxjYGRgYADifI9Iznh+m68M3CwMIHBtuf5lBP2/gYWBuRnI5WBgAokCAA1qCdsAeJxjYGRgYG7438AQw8IAAkCSkQEVsAIARwsCbnicY2FgYGB+ycDAwoDAAA6bAP0AAAAAAAB2AJ4AxgEGeJxjYGRgYGBlCARiEGACYi4gZGD4D+YzAAARLQFyAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICVkYmRmZGFkZWRjYGxgj0rMzGvJL+ULS0xL6M0k604v7S4NJ+BAQB9BAjaAAA=') format('woff'),url('./iconfont/iconfont.ttf?t=1518407379870') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('./iconfont/iconfont.svg?t=1518407379870#iconfont') format('svg'); /* iOS 4.1- */
}

在位置定位中主要使用padding margin来对元素的位置进行布局，利用浮动进行左右的排版

2.滚动栏问题

在这之中出现了最大堆栈的溢出的问题，进过百度谷歌等进行问题查找终于发现了问题所在，
也在这进行一下总结，方便以后查阅

1.进行了递归运算，但是忘记添加判断条件，导致递归无线循环下去。。

2.方法中参数引入问题。

3.使用了template模板没进行结尾或者是多出template，或者中v-for死循环(特殊出现的问题，也是我出现的问题）仔细查询代码的template以及v-for

4.高版本的vue默认是runtime版本，是不太编译器的，无法识别vue语法，需要在webpack配置带编译器的完整版本
解决方法在webpack.config.js加上

...
resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}},

5.检查两个项目中的package.json中的vue-loader版本，把自己的版本变更为该版本。

node更换模块版本命令：npm install -d vue-loader@x.x.x

之中使用的外部的swiper来进行布局，options属性对状态进行控制，具体的属性参考官方文档

3.模块显示

重点采用position进行定位显示，之中采用padding-bttom对块元素进行撑开，保证了能够不同手机正常显示内容，之中依然使用padding margin对元素位置进行微调，overflow对多出的元素进行消除

<style lang="stylus" scoped>
@import '~style/mixins.styl'    .icons>>>.swiper-containerheight: 0padding-bottom: 50%.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-imgsetdisplay: blockmargin: 0 autoheight: 100%.icon-nameposition: absoluteleft: 0right: 0bottom: 0line-height: .44remcolor: #333text-align: centerellipsis()</style>

elipsis为常用样式，所以定义到了style/mixins.styl中，用于超出显示后用…代替
具体设置如下

ellipsis()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

4.5周末去哪以及热门推荐

多个块进行显示，主要也是元素在块元素只用用padding margin进行排版
overflow对多出的元素进行消除

<style lang="stylus" scoped>
@import '~style/mixins.styl'.titlemargin-top: .2remline-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>

axios进行模拟后台传输

webpack官方给我们提供了一个proxyTable，可以将api路径转为自己模拟的路径，可以更加方便的进行数据的模拟
在config中的index.js中进行设置，设置如下

    proxyTable: {'/api': {target: 'http://localhost:8080',pathRewrite: {'^/api': '/static/data'}}},

通过axios官方get方法进行数据的获取，利用生命周期中的mount函数，mount在每次渲染时都会调用，所以在mount中进行数据的获取以及更新，渲染时就可以完成更新后的显示
返回的数据为{data：{我们需要的数据}，xxx：{}，…}的形式，所以要先剥离最外层的对象才是我们正确发回的数据，

剥离前

剥离后

  methods: {getHomeInfo () {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.list = data.swiperListthis.iconList = data.iconListthis.hotSet = data.recommendListthis.weekend = data.weekendList}}},mounted () {this.getHomeInfo()}

最后通过属性的形式进行父子组件的信息的传递，在组件中用props接受后进行循环显示

代码其中之一来解释说明
首组件

<template><div><Header :city="city"></Header><home-swiper :list="list"></home-swiper><Iconset :list="iconList"></Iconset><Hotvue :list="hotSet"></Hotvue><Weekend :list="weekend"></Weekend></div>
</template><script>
import Header from '@/components/Header'
import HomeSwiper from '@/components/Swiper'
import Iconset from '@/components/Iconset'
import Hotvue from '@/components/Hot'
import Weekend from '@/components/Weekend'
import axios from 'axios'export default {name: 'Home',components: {Header,HomeSwiper,Iconset,Iconset,Hotvue,Weekend},data() {return {city: '',list: [],iconList:[],hotSet: [],weekend: []}},methods: {getHomeInfo () {axios.get('/api/index.json').then(this.getHomeInfoSucc)},getHomeInfoSucc (res) {res = res.dataif(res.ret && res.data) {const data = res.datathis.city = data.citythis.list = data.swiperListthis.iconList = data.iconListthis.hotSet = data.recommendListthis.weekend = data.weekendList}console.log(res)}},mounted () {this.getHomeInfo()}
}
</script><style></style>

子组件轮播图


<template>
<div class="wrapper"><swiper :options="swiperOption" v-if="showSwiper"><swiper-slide v-for="item of list" :key="item.id"><img class="img-class" :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.img-classwidth: 100%</style>

总结

在Vue开发中，css还是很重要的一个知识点，必须抓牢，在样式排版上也是难点，如何正确的显示和布局非常重要，padding margin以及float浮动属性必须要牢牢掌握并且运用，父子组件的传值是Vue中显示元素的重点，Vue中大多数是对组件的数值进行控制进行显示。用.styl进行设置一些常用值，能大大的优化代码以及开发时间，Vue的重点是组件化开发

任务

如果时间充足的话依次进行下列的任务，因为Vue开发中需要用到webpack以及es6，需要了解一些内容，webpack目前只会一些小知识点，开发遇到bug有些茫然

对首页的开发流程进行梳理
拓展一些webpack的知识（不进行深入）
了解一些es6知识（仅了解常用的）
完成城市选项的开发
拓展一些常用css的知识便于以后的排版

Vue开发学习-周报2-动画样式以及首页开发相关推荐

IOS开发学习周报(二)
IOS开发学习周报(二) 简介课程名称 IOS开发实训任课老师郑贵锋老师&字节跳动工程师学号 16340015 专业(方向) 软件工程(计应) 姓名陈彬彬 Email 9441312 ...
IOS开发学习周报(一)
IOS开发学习周报(一) 学习记录概括熟悉在Mac OS下的开发操作,熟悉系统操作.了解相关快捷键以及触摸板快捷操作以便提高后续开发效率. 学习Objective-C相关语法,实操完成螺旋矩阵的算 ...
Kinect开发学习笔记之（三）Kinect开发环境配置
Kinect开发学习笔记之(三)Kinect开发环境配置 zouxy09@qq.com http://blog.csdn.net/zouxy09 我的Kinect开发平台是: Win7 x86 + V ...
Kinect开发学习笔记之（二）Kinect开发学习资源整理
Kinect开发学习笔记之(二)Kinect开发学习资源整理 zouxy09@qq.com http://blog.csdn.net/zouxy09 刚刚接触Kinect,在网上狂搜资料,获得了很多有 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Android开发学习总结——搭建最新版本的Android开发环境
最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1. ...
iOS开发学习之简单动画
原文 http://www.cnblogs.com/letougaozao/p/3673927.html UIActivityIndicatorView UIImageView的序列帧动画 UIVie ...
Hybrid混合开发学习笔记（1）混合应用开发定义和常见问题
一.什么是混合应用混合应用是指同时使用前端技术与原生技术开发的 App.通常由前端负责大部分界面开发和业务逻辑,原生负责封装原生功能供前端调用,二者以 WebView 作为媒介建立通信,从而既拥有 ...
Android图片颜色比例,Android开发学习之路-图片颜色获取器开发（1）
系列第一篇,从简单的开始,一步一步完成这个小项目. 颜色获取就是通过分析图片中的每个像素的颜色,来分析整个图片的主调颜色,有了主调颜色,我们可以用于图片所在卡片的背景或者标题颜色,这样整体感更加强烈. ...

Vue开发学习-周报2-动画样式以及首页开发