Vue实验报告3 实现导航栏与自定义插件登录页面

lsy永烨

已于 2023-11-28 15:07:04 修改

阅读量968

点赞数 4

分类专栏： vue实验报告文章标签： vue.js 前端 javascript

于 2023-11-01 08:46:46 首次发布

本文链接：https://blog.csdn.net/m0_69194031/article/details/134153390

版权

vue实验报告专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、实验内容

1.使用插槽vm.$slots实现一个导航栏结构

2.创建一个自定义插件，实现登录注册页面

二、实验内容

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .nav-item {
            display: inline;
            margin: 10px;
            padding: 10px;
            cursor: pointer;
        }

        .nav-item:hover {
            background-color: gray;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <slot1>百度</slot1>
        <slot1>淘宝</slot1>
        <slot1>火狐</slot1>
    </div>
    <template id="first">
        <div class="nav-item">
            <slot></slot>
        </div>
    </template>

    <script>
        Vue.component('slot1', {
            template: '#first'
        })

        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

2.代码

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .sign:hover {
            color: red;
        }

        .register:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>></p>
        <sr></sr>
    </div>

    <template id="first">
        <div>
            <button class="sign" @click="dl">登录</button>
            <button class="register" @click="zc">注册</button>
            <p>{{message}}</p>
        </div>
    </template>
    <script>
        Vue.component('sr', {
            template: '#first',
            data: function () {
                return {
                    message: ''
                }
            },
            methods: {
                dl() {
                    this.message = "登录组件"
                },
                zc() {
                    this.message = "注册组件"
                }
            }
        })

        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>