用vue和axios 写一个QQ

作者: 纪美 | 来源:发表于2018-09-28 11:03 被阅读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>&gt;</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>&gt;</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
}
]

效果：
消息：

联系人：

动态：

用vue和axios 写一个QQ

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读