zoukankan      html  css  js  c++  java
  • Vue 第十二章 命名视图实现经典布局

    1、命名视图

      routes:[
                    {
                        path:'/',components:{
                            default:header,
                            'left':leftBox,
                            'main':mainBox
                        }
                    }
                ]

    2、案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--cdn镜像快速导入Vue包-->
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
    
        <style>
            .header{
                background-color: orange;
                height: 80px;
            }
            .container{
                display: flex;
                height: 700px;
            }
            .left{
                background-color: lightblue;
                flex: 2;
            }
            .main{
                background-color: lightpink;
                flex: 8;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <router-view ></router-view>
        <div class="container">
    <!--        一个router-view占用一个组件的视图-->
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script>
    
        var header = {
            template:'<h1 class="header">Header头部区域</h1>'
        }
    
        var leftBox = {
            template:'<h1 class="left">Left部区域</h1>'
        }
    
        var mainBox = {
            template:'<h1 class="main">mian部区域</h1>'
        }
    
        var router = new VueRouter({
                routes:[
                    {
                        path:'/',components:{
                            default:header,
                            'left':leftBox,
                            'main':mainBox
                        }
                    }
                ]
        })
        //2.创建一个vue实例
        var vm = new Vue({
            el: '#app',    //表示当前我们new的这个Vue实例,要控制页面上的哪个区域
            data: { //data属性中存放的是el中要用到的数据
                msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序
            },
            router
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    JvisualVM、JMC监控远程服务器
    MVC学习笔记3
    MVC学习笔记2
    菜鸟级appium 必看
    关于redis一些问题记录
    git和github的区别
    VMware快照
    LR创建数据源读取excel
    mysql 5.7.18 源码安装笔记
    IDEA 配置Junit4
  • 原文地址:https://www.cnblogs.com/ywjfx/p/12562149.html
Copyright © 2011-2022 走看看