用vue和axios 写一个QQ
2018-09-28 本文已影响0人
纪美
html和Vue：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ</title>
<link rel="stylesheet" href="./qq.css">
</head>
<body>
<div class="app">
<div class="app-one">
<router-link to='/index'>消息</router-link>
<router-link to='/about'>联系人</router-link>
<router-link to='/content'>动态</router-link>
</div>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script src="axios.js"></script>
<script>
var Index={
template:`
<div class="font">
<ul>
<li v-for="value in fruList">
<img v-bind:src="value.img">
<span>{{value.name}}</span>
<p>{{value.inner}}</p>
<h6>{{new Date()|date()}}</h6>
</li>
</ul>
</div>
`,
data:function(){
return{
fruList:null
}
},
mounted:function(){
var self=this;
axios({
method:'get',//发送数据的方式
url:'fruit.json'
}).then(function(resp){//请求成功
// console.log(resp)
console.log(resp.data)
self.fruList=resp.data
}).catch(function(err){//请求失败
console.log(err)
})
}
}
var About={
template:`
<div>
<ul class="router-good">
<li>
<router-link to="/about/user">好友</router-link>
</li>
<li>
<router-link to="/about/login">群聊</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var User={
template:`
<div class="router" >
<ul v-for="(value,index) in concater">
<li @click="chg(index)">
<span>></span>
{{value.two}}
</li>
<ul class="ul-two"v-show="concater[index].flag">
<li>
<img :src="value.three">
<b>{{value.four}}</b>
<p>{{value.five}}</p>
</li>
</ul>
</ul>
</div>
`,
methods:{
chg:function(index){
this.concater[index].flag=!this.concater[index].flag
}
},
data:function(){
return{
concater:null
}
},
mounted:function(){
var that=this;
axios({
method:"get",
url:"about.json"
}).then(function(resp){
console.log(resp.data)
that.concater=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
var Login={
template:`
<ul class="router-a">
<li v-for="(value,index) in con">
<span>></span>
<h5
@click="btn(index)">{{value.one}}</h5>
<ul v-show="con[index].flag">
<li>
<img :src="value.two">
<p>{{value.three}}</p>
</li>
</ul>
</li>
</ul>
`,
methods:{
btn:function(index){
this.con[index].flag=!this.con[index].flag
}
},
data:function(){
return{
con:null
}
},
mounted:function(){
var good=this;
axios({
method:"get",
url:"content.json"
}).then(function(resp){
console.log(resp.data)
good.con=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
var Content={
template:`
<div class="d-img">
<img src="images/QQ图片20180926081602.png">
<img src="images/QQ图片20180926082143.png">
<img src="images/QQ图片20180926103256.png">
<img src="images/QQ图片20180926103433.png">
</div>
`
}
const routes=[
{path:'/',component:Index},
{path:'/index',component:Index},
{path:'/about',component:About,
children:[
{path:'/',component:User},
{path:'user',component:User},
{path:'login',component:Login},
]
},
{path:'/content',component:Content}
]
const router=new VueRouter({
routes:routes
})
//过滤器
Vue.filter('date',function(data){
return data.getHours()+":"+data.getMinutes();
})
new Vue({
el:".app",
router:router
})
</script>
</body>
</html>
css:
*{
margin:0;
padding: 0;
list-style: none;
}
body{
background: #999;
}
a{
text-decoration: none;
}
.app{
width:278px;
background: white;
height:525px;
margin:0 auto;
background: url(images/u=1738230424,3160324865&fm=26&gp=0.jpg) center;
}
.app-one{
width:278px;
overflow: hidden;
border-bottom: 1px solid #efefef;
}
.app .router-link-active{
border-bottom:2px solid #cb0816;
color:#cb0816;
}
.app-one a{
width:92.67px;
float: left;
display: block;
text-align: center;
line-height: 39px;
font-size:16px;
color:#909090;
}
.router{
width:278px;
overflow: hidden;
}
.router span{
color:#909090;
}
.router li:nth-child(1){
margin-top:15px;
}
.router li{
line-height:30px;
font-size:13px;
color:black;
border:none;
font-weight: 100;
margin-left: 28px;
margin-bottom: 15px;
}
.router ul li:hover{
background:rgba(0,0,0,.2);
}
.router .ul-two li{
height:60px;
margin-top: -18px;
}
.router .ul-two li:hover{
background:rgba(0,0,0,.2);
}
.router .ul-two li img{
border-radius: 50%;
width:50px;
height:50px;
margin-top:10px;
margin-left:10px;
}
.router .ul-two li b{
font-size: 15px;
text-align: center;
margin-top: -62px;
width:50px;
display: block;
margin-left:69px;
font-weight: 100;
}
.router .ul-two li p{
font-size: 13px;
color:#909090;
width:150px;
margin-left:76px;
margin-top: -4px;
font-weight: 100;
}
.router-good{
width:278px;
overflow: hidden;
}
.router-good li{
font-size: 14px;
font-weight: 100;
width:80px;
margin-left:29px;
float: left;
margin-top: 10px;
}
.router-good ul li:hover{
background:rgba(0,0,0,.2);
}
.router-good li a{
color:#909090;
width:20px;
height:20px;
}
.router-good .router-link-active{
color: #de0f1e;
background: #fff8f8;
}
.router-a{
width:278px;
overflow: hidden;
}
.router-a li:nth-child(1){
margin-top:15px;
}
.router-a li{
line-height:30px;
font-size:13px;
color:black;
border:none;
font-weight: 100;
margin-left: 28px;
margin-bottom: 15px;
}
.router-a ul:hover{
background:rgba(0,0,0,.2);
}
.router-a span{
color:#909090;
}
.router-a h5{
margin-left: 19px;
margin-top: -29px;
font-weight: 100;
font-size:13px;
}
.router-a ul{
width:258px;
overflow: hidden;
margin-left: -21px;
margin-top: -7px;
}
.router-a ul li img{
width:30px;
height:30px;
border-radius: 50%;
float: left;
}
.router-a ul li p{
float:left;
line-height:30px;
margin-left: 10px;
height: 30px;
}
.d-img img{
width:136px;
height:135px;
}
.font ul li{
width:278px;
height:60px;
margin:10px 0px;
}
.font ul li:hover{
background:rgba(0,0,0,.2);
}
.font ul li img{
border-radius: 50%;
width:50px;
height:50px;
margin-top:10px;
margin-left:10px;
}
.font ul li span{
font-size: 15px;
text-align: center;
margin-top: -50px;
width:50px;
display: block;
margin-left:69px;
}
.font ul li:nth-child(2) span{
color:red;
}
.font ul li p{
font-size: 13px;
color:#909090;
width:150px;
margin-left: 78px;
margin-top: 2px;
font-weight: 100;
}
.font ul li h6{
text-align: right;
margin-top:-37px;
margin-left: 215px;
width:50px;
font-weight: 100;
color:#909090;
}
json:
about.json:
[
{
"two":"我的好友 1/1",
"three":"images/QQ图片20180925165220.jpg",
"four":"梁萌",
"five":"上传了三张照片",
"flag":true
},
{
"two":"同学 1/1",
"three":"images/QQ图片20180925165451.jpg",
"four":"二哥",
"five":"上传了五张张照片",
"flag":false
},
{
"two":"白名单 1/1", "three":"images/2.jpg",
"four":"王颖",
"five":"上传了9张照片",
"flag":false
},
{
"two":"黑名单 1/1",
"three":"images/QQ图片20180925165402.jpg",
"four":"大力",
"five":"上传了3张照片",
"flag":false
}
]
content.json:
[
{
"one":"我的群聊 6/6",
"two":"images/QQ图片20180925165402.jpg",
"three":"王大力粉丝群99+",
"flag":true
},{
"one":"我的多人聊天 10/15",
"two":"images/QQ图片20180925165326.jpg",
"three":"哈哈哈！",
"flag":false
}
]
效果：
消息：
联系人：
动态：
