项目-微博

该项目包含了bootstrap的巨幕、标签页、模态框、vue的组件及父子组件传值等知识。
首先，整个页面分为两大部分：

左侧的个人信息部分
右侧的正文部分：正文部分包含了三个方面：日记、游记、相片集

个人信息部分

该部分的背景图片、文字等信息的位置确定好后，将背景图片的overflow-x设置为 hidden、overflow-y设置为 auto，最后定好层级z-index。
头像部分采用background-size: cover的方式将图片最大限度的填充其父元素。

正文部分

利用bootstrap的栅格系统做好布局，其后为正文添加三个标签页。

添加日记、游记、照片

日记的内容用组件编写即可。之后为日记部分添加过渡效果和模态框。
模态框用v-for、插值的方法编写。
利用vue的父子传值及组件的方法获取到日记的正文内容，并为其绑定v-if="on"，on为true，之后为过渡按钮绑定click事件，通过改变on的布尔值来控制日记正文的过渡效果；
通过添加日记按钮来为日记部分添加内容。在添加日记按钮上绑定click事件（click事件的函数接收一个event参数，用以消除事件冒泡），通过鼠标点击来添加 / 移除模态框的class（若模态框隐藏，则为其添加类active、类show使其显示；若模态框已显示，再次点击按钮为模态框移除类active、类show让其隐藏。）来控制模态框的显示 / 隐藏。添加内容的界面用模态框来承载，模态框的内容同样用vue来处理。

模态框中的提交功能

1.模态框中的提交功能由一个button按钮承载，并为其绑定click事件：click事件所绑定的函数接收一个参数，用于if-else语句的条件判断：

当传入的参数是字符串dairy时，将item对象添加到dairy数组中，接着通过v-for、插值的方式将内容输出到正文中。
点击提交按钮的同时，模态框隐藏也被隐藏了。这是因为提交按钮的同时，模态框的属性inputClass的属性值改变成了 .fade和 .modal-dialog。

照片的动画

这里为照片页面添加的动画效果是：3秒内以慢速结束的方式改变x轴或y轴的位置。
这个动画的原理是：当点击按钮切换图片离开时，图片向y轴下方偏移500px，同时透明度降为0；图片进入时，图片向x轴右侧偏移500px，同时透明度增加到1。图片离开或进入所需要的时间为3s，且离动画结束时间越近，动画播放速度越慢。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>微博2.0</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/minty/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <style>
        #info-box {
            background: url("https://static1.bcjiaoyu.com/39de4af0b42ec67bbb9f9003ff6fcfb6_q.jpeg-767x1499");
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 300px;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 100;
        }

        #img-box {
            background: url("https://resource.bcgame-face2face.haorenao.cn/992e48e80887364b93e334e133ffd4e1_d.jpg-634x952");
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 20px auto;
            background-size: cover;
            background-position: top center;
            /* background-position: center; 只能调节图片在像框中的位置，而不能调节图片在 #img_background 中的位置。*/
        }

        #info-text {
            font-size: 1.1em;
            font-weight: bold;
            color: rgb(5, 5, 5);
        }

        #content {
            position: absolute;
            top: 0px;
            left: 300px;
            bottom: 0;
            right: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }
        /*日记、游记——过渡*/
       .slide-enter-active,.slide-leave-active{
           transition:opacity 1s;
       }
       .slide-enter,.slide-leave-to{
           opacity:0;
       }
       /*解决照片定位错乱*/
       #photo .row div{
           display: flex;
           flex-wrap: wrap;
       }
       .row .card{
            width:100%;
            height: 300px;
        }
        /* 照片集--动画 */
        .fade-enter-active,.fade-leave-active{
            transition: all 3s ease-out;
        }

        .fade-enter{
            transform: translateX(500px);
            opacity: 0;
        }
        
        .fade-leave-active{
            transform: translateY(500px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <!--个人信息栏-->
    <div id="info-box" class="text-center">
        <h1>Nancy</h1>
        <div id="img-box"></div>
        <div id="info-text">
            <p>一直都喜欢编程的Nancy</p>
            <p>正在努力学编程的Nancy</p>
            <p>会变得更厉害的Nancy</p>
        </div>
        <a href="https://www.weibo.com/"><img id="sina" src="./imges/微博1.png"></a>
    </div>

    <!--微博主页-->
    <!--导航栏-->
    <div id="content">
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link" href="#dairy-post-info" data-toggle="tab">日记</a></li>
            <li class="nav-item"><a class="nav-link" href="#travel" data-toggle="tab">游记</a></li>
            <li class="nav-item"><a class="nav-link" href="#photo" data-toggle="tab">照片集</a></li>
        </ul>
        <div class="tab-content">
            <!--日记-->
            <div class="tab-pane active show" id="dairy-post-info">
                <!--添加过渡效果-->
                <div v-for="(item,index) in dairy" class="jumbotron">
                    <transition-group name="slide" tag="div">
                        <text-content-component v-bind:item="item" v-bind:key="index" v-if="on"></text-content-component>
                    </transition-group>
                </div>
                <button class="btn btn-primary" v-on:click="on=!on">过渡</button>
                <button class="btn btn-primary" v-on:click="showInput">添加日记</button>
                <div v-bind:class="inputClass" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row" v-for="(value,key) in item">
                                <label class="col-md-2 col-form-label">{{key}}</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control is-valid" v-model:value="item[key]">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" v-on:click="submit('dairy')">提交</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--游记-->
            <div class="tab-pane container-fluid" id="travel">
                <div class="jumbotron" v-for="item in travel">
                    <div class="row">
                        <div class="col-md-5">
                            <img height="300" width="400" v-bind:src="item.img">
                        </div>
                        <div class="col-md-7">
                            <transition name="custom" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
                            <div v-if="isshow">
                                <h2 name="post-title">
                                <span class="display-3 text-primary">{{item.date}}</span>
                                <br>
                                <span name="title">{{item.title}}</span>
                            </h2>
                            <p>{{item.ins}}</p>
                            <hr>
                            <p>{{item.content}}</p>
                        </div>
                        </transition>
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary" @click="isshow=!isshow">动画</button>
                <button class="btn btn-primary" v-on:click="showInput">添加游记</button>
                <div v-bind:class="inputClass">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row" v-for="(value,key) in item">
                                <label class="col-md-2 col-form-label">{{key}}</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control is-valid" v-model:value="item[key]">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" v-on:click="submit('travel')">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            

            <!--照片集-->
            <div class="tab-pane container" id="photo">
                <div class="row">
                    <transition-group name="fade" tag="div">

                    <pic-content-component v-for="(item,index) in pics" v-bind:item="item" v-bind:key="index" v-if="show"></pic-content-component>
                </transition-group>
                </div>
                <button class="btn btn-primary" v-on:click="show=!show">动画</button>
                <button class="btn btn-primary" v-on:click="showInput">添加照片</button>
                <div v-bind:class="inputClass">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row" v-for="(value,key) in item">
                                <label class="col-md-2 col-form-label">{{key}}</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" v-model="item[key]">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" v-on:click="submit('pics')">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        Vue.component("text-content-component",{
            props:["item"],
            template:`<div class="jumbotron">
                    <h2>
                        <span class="display-3 text-primary">{{item.date}}</span>
                        <span name="title">{{item.title}}</span>
                    </h2>
                    <p>{{item.ins}}</p>
                    <hr>
                    <p>{{item.content}}</p>
                </div>`
        })
        Vue.component("pic-content-component",{
            props:["item"],
            template:`<div class="col-md-4">
                        <div class="card">
                            <img class="card-img" v-bind:src="item.img" height='300' alt="Card image">
                            <div class="card-img-overlay" style="color:azure">
                                <h4 class="card-title">{{item.title}}</h4>
                                <p class="card-text">{{item.content}}</p>
                                <p class="text-muted card-text">{{item.date}}</p>
                            </div>
                        </div>
                    </div>`
        })
        
        var contentApp = new Vue({
            el: "#content",
            methods: {
                showInput: function (event) {
                    if (this.inputClass === 'fade modal-dialog') {
                        this.inputClass = 'fade modal-dialog active show'
                    } else {
                        this.inputClass = 'fade modal-dialog'
                    }
                },
                submit: function (message) {
                    if (message === "dairy") {
                        this.dairy.push(Object.assign({}, this.item))
                    } else if (message === "travel") {
                        this.travel.push(Object.assign({}, this.item))
                    } else {
                        this.pics.push(Object.assign({}, this.item))
                    }
                    this.inputClass = "fade modal-dialog"
                }
            },
            data: {
                on:true,
                isshow:true,
                show:true,
                //fade与modal-dialog顺序不能颠倒。
                inputClass: "fade modal-dialog",
                dairy: [
                    {
                        date: "2018/07/30",
                        title: "学习Vue.js的第一天",
                        ins: "Inscription",
                        content: "很容易上手的Vue.js"
                    },
                    {
                        date: "2018/07/31",
                        title: "学习Vue.js的第二天",
                        ins: "lalala",
                        content: "好好学习 天天向上"
                    }
                ],
                
                item: {
                    img: "填入图片地址。若是添加'日记'，可忽略不填",
                    date: "填入日期",
                    title: "标题",
                    ins: "题记",
                    content: "内容"
                },
                travel: [
                    {
                        img: "https://cdn.pixabay.com/photo/2017/12/03/17/30/alley-2995354_1280.jpg",
                        date: "2018/07/30",
                        title: "Travel around world",
                        ins: "Inscription",
                        content: "Great time!"
                    },
                    {
                        img: "https://static1.bcjiaoyu.com/b3a608bf2b85a75ece602642f19b3f1e_d.jpg-1042x703",
                        date: "2018/07/31",
                        title: "Travel around world",
                        ins: "Inscription",
                        content: "What a great time!"
                    }
                ],
                pics: [
                    {
                        img: "https://images.unsplash.com/photo-1532714845903-d7b2a053e92b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85fe6e18e27b3c748112641fd0bcfb12&auto=format&fit=crop&w=500&q=60",
                        title: "Pics story",
                        content: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
                        date: "update 2018/07/30"
                    },
                    {
                        img: "https://cdn.pixabay.com/photo/2018/05/11/23/45/highway-3392100__340.jpg",
                        title: "Pics story",
                        content: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
                        date: "update 2018/07/30"
                    },
                    {
                        img: "https://cdn.pixabay.com/photo/2018/05/30/16/23/fruit-3441830__340.jpg",
                        title: "Pics story",
                        content: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
                        date: "update 2018/07/30"
                    },
                    {
                        img: "https://cdn.pixabay.com/photo/2018/06/04/23/42/raspberry-3454504_1280.jpg",
                        title: "Pics story",
                        content: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
                        date: "update 2018/07/30"
                    },
                    {
                        img: "https://cdn.pixabay.com/photo/2018/07/14/22/53/currants-3538617_1280.jpg",
                        title: "Pics story",
                        content: "This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
                        date: "update 2018/07/30"
                    },
                ]
            },


        })

    </script>
</body>

</html>

最后编辑于：2018.11.05 21:58:56

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342