Vue在页面布局分为上中下三部分

作者: ___大鱼___ | 来源:发表于2018-11-18 14:22 被阅读29次

Vue在页面布局分为上中下三部分
Node+WebSocket+Vue聊天室: 界面美化，代码优化
css 实现基本的网页布局，上中下三部分
vue element-ui 后台支付页面布局
页面布局
选课功能
经典页面布局学习
移动端整体布局
weex布局问题
ios系统下使用fixed定位，弹出键盘导致fixed失效问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    .header{
        width: 100%;
        height: 150px;
        background-color: blueviolet;

    }
    h1{
        margin: 0;
        padding: 0;
    }


    .content{
        display: flex;
        height: 572px;
    }
    .left{
        flex: 2;
        background-color: #1392e9;
    }
    .mainBox{
        flex: 8;
        background-color: #60ac39;
    }

</style>
<body>

<div id="container">
 <router-view class="header"></router-view>
    <div class="content">
        <div class="left">
         <router-view name="left"></router-view>

        </div>
        <div class="mainBox">
     <router-view name="mainBox"></router-view>

        </div>
    </div>

</div>


<script>

    var header = {
        template: '<h1>头部内容</h1>'
    }

    var left = {
        template: '<h1>左侧内容</h1>'
    }

    var mainBox = {
        template: '<h1>主要内容</h1>'
    }



    var router = new VueRouter({
        routes:[
            {path: '/', components: {
                'default': header,
                'left': left,
                'mainBox': mainBox,
            }
            }
        ]
    })


    var app1 = new Vue({
        el: '#container',
        data:{
            list:[1,3,4]
        },
        router



    })


</script>





</body>

</html>