项目-微博

该项目包含了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，且离动画结束时间越近，动画播放速度越慢。

    
    
    
    
    
    
    
    



    
    

        
Nancy
        

        

            
一直都喜欢编程的Nancy
            
正在努力学编程的Nancy
            
会变得更厉害的Nancy
        
        
    

    
    
    

        

            
日记
            
游记
            
照片集
        
        

            
            

                
                

                    
                        
                    
                
                过渡
                添加日记
                

                    

                        

                            

                                {{key}}
                                

                                    
                                
                            
                        
                        

                            提交
                        
                    
                
            

            
            

                

                    

                        

                            
                        
                        

                            
                            

                                

                                {{item.date}}
                                

                                {{item.title}}
                            
                            
{{item.ins}}
                            

                            
{{item.content}}
                        
                        
                        
                    
                
                动画
                添加游记
                

                    

                        

                            

                                {{key}}
                                

                                    
                                
                            
                        
                        

                            提交
                        
                    
                
            
            

            
            

                

                    

                    
                
                
                动画
                添加照片
                

                    

                        

                            

                                {{key}}
                                

                                    
                                
                            
                        
                        

                            提交