说明
1.上一章--Home.vue及vue-resource使用
2.cangdu大神的项目源码地址--Github地址
3.接口地址--Github地址
4.UI框架用的是--Mint UI
5.下一章--登录注册页面及密码的暗明文转换
开始
1.先看看Home.vue代码
<template><div><mt-header fixed><span slot="left">elm</span><mt-button slot="right">登录|</mt-button><mt-button slot="right">注册</mt-button></mt-header><div class="padtop40"><div class="after ih50 padlr10 box bgfff"><span class="">当前选择城市</span><span class="right fs0-8 col9f">定位不准时，请在城市列表选择</span></div><mt-cell title="天津" class="col after" to="" is-link value=""></mt-cell><div class="mgtop10 bgfff"><mt-cell class="after" title="热门城市"></mt-cell><div class="itembox ovhid col"><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div></div> </div> <div class="mgtop10 bgfff"><mt-cell class="after" title="A"></mt-cell><div class="itembox ovhid"><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div></div> </div> </div></div>
</template><script>export default {data () {return {}},component:{//注册组件},mounted:function(){//生命周期this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {console.log(response);}, response => {console.log(response);});},computed:{//计算属性},methods:{//函数}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{width:25%;float:left;text-align:center;height:40px;line-height:40px;box-sizing: border-box;border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){border-right:0px;
}
</style>效果如下
2.赋值
首先我们要把城市列表的信息先赋值给一个变量，这样我们就可以调用了嘛。
3.v-for
城市列表我们有了，但是我们怎么把它显示到页面呢？难道要用for循环拼接字符串插到页里么？NONONO，那还是操作DOM节点，而VUE的好处之一就是操作数据来控制DOM。循环VUE用的是v-for，home.vue的html部分代码修改如下
<template><div><mt-header fixed><span slot="left">elm</span><mt-button slot="right">登录|</mt-button><mt-button slot="right">注册</mt-button></mt-header><div class="padtop40"><div class="after ih50 padlr10 box bgfff"><span class="">当前选择城市</span><span class="right fs0-8 col9f">定位不准时，请在城市列表选择</span></div><mt-cell title="天津" class="col after" to="" is-link value=""></mt-cell><div class="mgtop10 bgfff"><mt-cell class="after" title="热门城市"></mt-cell><div class="itembox ovhid col"><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div><div>天津</div></div> </div> <div v-for="(items,index) in citylist" class="mgtop10 bgfff"><mt-cell class="after" :title="index"></mt-cell><div class="itembox ovhid"><div v-for="item in items">{{item.name}}</div></div> </div> </div></div>
</template>其实只是把全部城市列表的代码修改如下
<div v-for="(items,index) in citylist" class="mgtop10 bgfff"><mt-cell class="after" :title="index"></mt-cell><div class="itembox ovhid"><div v-for="item in items">{{item.name}}</div></div> </div> 修改第一段代码v-for="(items,index) in citylist"citylist是一个object对象（也可以是数组），items是citylist的每一项键值，index是items的键名（若为数组则是1，2,3...递增）。citylist有多少项，就会循环多少次，就会产生多少个元素（该元素为 v-for 写在的那个元素，其内的子元素也会自动生成）。然后就可以用item在元素中当做键值来使用。
修改第二段代码:title="index"
因为咱们获取的数据的键名就是A,B,C,D...所以咱们的城市列表直接用index来排序。而:title="index"是 v-bind:title="index"的缩写。vue的命令都用v-来开头。v-bind用来绑定DOM属性。
修改第三段代码<div v-for="item in items">{{item.name}}</div>
老铁们要注意，若items是A开头的城市数组集合，而item是items的 每一项，即一个具体的城市（这只是举一个例子）
ok，代码咱们先写这么多，来看看页面变化。
全部出现！！老铁们可以看到，咱们只需要写一个模板，vue会帮我们自动生成所有的数据。但是还有几个问题需要处理一下
1.数据的顺序并不是从A挨个排到Z；
2.有的城市名字太长出现重叠。
4.排序
思路：重新创建一个object，键名是从A到Z，键值就是获取的数据的键值。
计算函数：js写在哪？一种方法是写在生命周期mounted的数据请求里，直接返回一个处理好的citylist，但咱们用另一种方法--计算属性computed。home.vue部分是代码修改如下
computed:{//计算属性getlist:function(){var mycitylist={};for(var i=65;i<=90;i++){var num= String.fromCharCode(i);mycitylist[num]=this.citylist[num];}return mycitylist}},fromCharCode()是把ascii码转成字符，所以num就是A,B,C,D...当我们调用getlist函数时，得到的是mycitylist（当citylist改变时，无需重新调用，mycitylist会随之改变）
函数写好了在哪调用呢？
<div v-for="(items,index) in getlist" class="mgtop10 bgfff"><mt-cell class="after" :title="index"></mt-cell><div class="itembox ovhid"><div v-for="item in items">{{item.name}}</div></div> </div> 只是把<template></template>中的citylist替换成getlist即可。
看看页面结果
解决！城市已经按照A-Z排列，只剩下名字长度问题了，设置为单行不换行超出省略号即可，在src下的style下的mycss.css添加
.nowarp{white-space:nowrap; /* 不换行 */overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}把nowarp这个class加到城市名字的div上即可
解决。这么看城市列表是没有问题了，那咱们接下来请求热门城市和当前城市。home.vue修改如下
<template><div><mt-header fixed><span slot="left">elm</span><mt-button slot="right">登录|</mt-button><mt-button slot="right">注册</mt-button></mt-header><div class="padtop40"><div class="after ih50 padlr10 box bgfff"><span class="">当前选择城市</span><span class="right fs0-8 col9f">定位不准时，请在城市列表选择</span></div><mt-cell :title="nowcity.name" class="col after" to="" is-link value=""></mt-cell><div class="mgtop10 bgfff"><mt-cell class="after" title="热门城市"></mt-cell><div class="itembox ovhid col"><div v-for="item in hotcity">{{item.name}}</div></div> </div> <div v-for="(items,index) in getlist" class="mgtop10 bgfff"><mt-cell class="after" :title="index"></mt-cell><div class="itembox ovhid"><div class="nowarp" v-for="item in items">{{item.name}}</div></div> </div> </div></div>
</template><script>export default {data () {return {citylist:"",hotcity:"",nowcity:""}},component:{//注册组件},mounted:function(){//生命周期//城市列表this.$http.get('http://cangdu.org:8001/v1/cities?type=group').then(response => {console.log(response);this.citylist=response.body;}, response => {console.log(response);});//热门城市this.$http.get('http://cangdu.org:8001/v1/cities?type=hot').then(response => {console.log(response);this.hotcity=response.body;}, response => {console.log(response);});//定位城市this.$http.get('http://cangdu.org:8001/v1/cities?type=guess').then(response => {console.log(response);this.nowcity=response.body;}, response => {console.log(response);});},computed:{//计算属性getlist:function(){var mycitylist={};for(var i=65;i<=90;i++){var num= String.fromCharCode(i);mycitylist[num]=this.citylist[num];}return mycitylist}},methods:{//函数}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{width:25%;float:left;text-align:center;height:40px;line-height:40px;box-sizing: border-box;border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){border-right:0px;
}
</style>页面结果如下
搞定！home.vue大致写完了，剩下就是交互了
