Vue basic introductory notes 18: naming views to achieve classic layout

Time:2021-9-4

Vue basic introductory notes 18: naming views to achieve classic layout

<!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="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        *,h1{
            margin: 0;
            padding: 0

        }
        .header{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        .left{
            width: 30%;
            height: 500px;
            background-color: aqua;
            display:flex;
            float: left;
        }
        .main{
            display: flex;
            width: 70%;
            background-color: yellow;
            height: 500px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view name='header'></router-view>
        <router-view name='left'></router-view>
        <router-view name='main'></router-view>
    </div>
    <script>
        let header = { template: '<h1 class="header">header</h1>' }
        let left = { template: '<h1 class="left">left</h1>' }
        let main = { template: '<h1 class="main">main</h1>' }
        const router = new VueRouter({
            routes: [
                {
                    path: '/', components: {
                        'header': header,
                        'left': left,
                        'main': main
                    }
                }
                // { path: '/login', component: login },
                // { path: '/register', component: register }
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });
        Vue.config.devtools = true
    </script>
</body>

</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

Introduction to CGI programming with ruby

Write CGI script: The most basicRubyThe CGI script looks like this: ? 1 2 3 4 5 #!/usr/bin/ruby   puts “HTTP/1.0 200 OK” puts “Content-type: text/html\n\n” puts “<html><body>This is a test</body></html>” If you call this script, test If CGI is uploaded to a UNIX / Linux based web hosting service provider and has appropriate permissions, […]