使用vue组件和flex布局快速搭建页面框架

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        html,body,#app{
            width: 100%;
            height: 100%;
        }
        #app{
            display: flex;
            flex-direction: column;
        }
        .top{
            height: 80px;
            background-color: burlywood;
        }
        .main{
            flex: 1;
            display: flex;
        }
        .main .left{
            width: 140px;
            background-color: chartreuse;
        }
        .main .right{
            flex: 1;
            background-color: coral;
        }
        .footer{
            height: 60px;
            background-color: cornsilk;
        }
    </style>
</head>
<body>
    <div id="app">
        <my-top></my-top>
        <my-main class="main"></my-main>
        <my-footer class="footer"></my-footer>
    </div>

    <!-- 组件 -->
    <template id="top">
        <div  class="top">
            <h1>头部导航</h1>
        </div>
    </template>
    <template id="main">
        <div>
            <my-left class="left"></my-left>
            <my-right class="right"></my-right>
        </div>
    </template>
    <template id="footer">
        <div>
            <h1>版权信息</h1>
        </div>
    </template>
    <template id="left">
        <div>
            <ul>
                <li>个人中心</li>
                <li>设置中心</li>
                <li>操作</li>
            </ul>
        </div>
    </template>
    <template id="right">
        <div>
            <h1>内容展示区域</h1>
        </div>
    </template>
    <script>
        let myTop = {template:"#top"};
        let myLeft = {template:"#left"}
        let myRight = {template:"#right"}
        let myMain = {
            template:"#main",
            components:{
                myLeft,myRight
            }
        };
        let myFooter = {template:"#footer"}

        new Vue({
            el:'#app',
            components:{
                myTop,myMain,myFooter
            }
        })
    </script>
</body>
</html>

 

posted @ 2023-05-25 21:37  JackieDYH  阅读(1)  评论(0)  编辑  收藏  举报  来源