zoukankan      html  css  js  c++  java
  • vue命名视图实现经典布局

    vue命名视图实现经典布局

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <script src="vue.js"></script>
    10 <script src="vue-router.js"></script>
    11 <style>
    12 .header{
    13     background-color: orange;
    14     height: 80px;
    15 }
    16 h1{
    17     margin: 0;
    18     padding: 0
    19 }
    20 .container{
    21     display: flex;
    22     flex: 2
    23 }
    24 .left{
    25 background-color: red;
    26 height: 800px
    27 }
    28 .main{
    29 background-color: aqua;
    30 flex: 8;
    31 height: 800px
    32 }
    33 </style>
    34 <body>
    35     <div id="app">
    36         <router-view ></router-view>
    37         <div class="container">
    38                 <router-view name="left"></router-view>
    39                 <router-view name="main"></router-view>
    40         </div>
    41     </div>
    42    <script>
    43        var header={
    44            template:'<h1 class="header">头部区域</h1>'
    45        }
    46        var leftBox={
    47            template:'<h1 class="left">left区域</h1>'
    48        }
    49        var mainBox={
    50            template:'<h1 class="main">main区域</h1>'
    51        }
    52        var router=new VueRouter({
    53            routes:[
    54               { path: '/', components: {
    55                  'default':header,
    56                   'left':leftBox,
    57                   'main':mainBox
    58               } 
    59             },
    60              
    61            ]
    62        })
    63         var vm=new Vue({
    64             el:'#app',
    65             data:{},
    66             methods: {
    67                 
    68             },
    69             router:router//将路由规则对象,注册到vm实例,用来监听URL地址的变化,然后展示对应的组件
    70         })
    71     </script> 
    72 </body>
    73 </html>
  • 相关阅读:
    css实现并列效果
    去除inline-block之间的间距
    鼠标点击<input>输入域后出现有颜色的边框
    消除a标签点击后产生的虚线框
    超过既定行数时,用省略号代替的方法
    常用按钮样式
    常用颜色
    通过Gulp流方式处理流程
    IntelliJ IDEA 10 配置 Tomcat7
    chrome浏览器调试线上文件映射本地文件
  • 原文地址:https://www.cnblogs.com/wanqingcui/p/10765347.html
Copyright © 2011-2022 走看看