说明
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
大致写完了,剩下就是交互了