zoukankan      html  css  js  c++  java
  • Vue--一个页面实现多个同级组件---命名视图实现经典布局(头部,左右布局)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <script src="./lib/vue-router-3.0.1.js"></script>
      <style>
        html,
        body {
          margin: 0;
          padding: 0;
        }
    
        .header {
          background-color: orange;
          height: 80px;
        }
    
        h1 {
          margin: 0;
          padding: 0;
          font-size: 16px;
        }
    
        .container {
          display: flex;
          height: 600px;
        }
    
        .left {
          background-color: lightgreen;
          flex: 2;
        }
    
        .main {
          background-color: lightpink;
          flex: 8;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
    
        <router-view></router-view>
        <div class="container">
          <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">mainBox主体区域</h1>'
        }
    
        // 创建路由对象
        var router = new VueRouter({
          routes: [
            /* { path: '/', component: header },
            { path: '/left', component: leftBox },
            { path: '/main', component: mainBox } */
    
    
            {
              path: '/', components: {
                'default': header,
                'left': leftBox,
                'main': mainBox
              }
            }
          ]
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
      </script>
    </body>
    
    </html>
  • 相关阅读:
    socket 常用api
    socket客户端小例
    select和ioctl的一个简单测试
    git 相关配置
    pvr转png
    flash 中matrix
    moto x使用注意事项
    互联网思维将颠覆我们的认知
    微信公众账号怎么快速增加粉丝
    Discuz如何解除某个会员的QQ绑定状态
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11617699.html
Copyright © 2011-2022 走看看