夜光带你走进Vue.js（三十）擅长的领域

最新推荐文章于 2024-06-09 08:00:00 发布

GeniusTeam-夜光

最新推荐文章于 2024-06-09 08:00:00 发布

阅读量168

点赞数

分类专栏： Genius-Vue.js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102474189

版权

Genius-Vue.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

清晨的阳光温暖而和煦，洒在脸上，让人没有心思去考虑烦心的事情，只想沐浴在光芒中放空自己。新的一天又开始了，亲爱的人啊

正文：创建一个简单的导航菜单

养兵千日用兵一时，学的东西要灵活使用

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光：灵活使用之前学的，创建几个简单实例</title>

</head>
<style>

    *{
        margin:0;
        padding:0;
    }

    body{
        font:15px/1.3 'Open Sans', sans-serif;
        color: #5e5b64;
        text-align:center;
    }

    a, a:visited {
        outline:none;
        color:#389dc1;
    }

    a:hover{
        text-decoration:none;
    }

    section, footer, header, aside, nav{
        display: block;
    }

    /*-------------------------
        嗯唔~~样式
    --------------------------*/

    nav{
        display:inline-block;
        margin:60px auto 45px;
        background-color:#5597b4;
        box-shadow:0 1px 1px #ccc;
        border-radius:2px;
    }

    nav a{
        display:inline-block;
        padding: 18px 30px;
        color:#fff !important;
        font-weight:bold;
        font-size:16px;
        text-decoration:none !important;
        line-height:1;
        text-transform: uppercase;
        background-color:transparent;

        -webkit-transition:background-color 0.25s;
        -moz-transition:background-color 0.25s;
        transition:background-color 0.25s;
    }

    nav a:first-child{
        border-radius:2px 0 0 2px;
    }

    nav a:last-child{
        border-radius:0 2px 2px 0;
    }

    nav.home .home,
    nav.projects .projects,
    nav.services .services,
    nav.contact .contact{
        background-color:#e35885;
    }

    p{
        font-size:22px;
        font-weight:bold;
        color:#7d9098;
    }

    p b{
        color:#ffffff;
        display:inline-block;
        padding:5px 10px;
        background-color:#c4d7e0;
        border-radius:2px;
        text-transform:uppercase;
        font-size:18px;
    }

</style>
<body>
<div id="main">

    <!-- 夜光：激活的菜单样式为  active 类 -->
    <!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->

    <nav v-bind:class="active" v-on:click.prevent>

        <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->

        <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
        <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
        <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
    </nav>

    <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->

    <p>靓仔/靓女：选择了 <b>{{active}} 菜单</b></p>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    // 夜光：创建一个新的 Vue 实例
    var demo = new Vue({
        // 嗯唔：DOM 元素，挂载视图模型
        el: '#main',

        // 定义属性，并设置初始值
        data: {
            active: 'home'  //夜光：初始，这个是激活状态
        },

        // 夜光：点击菜单使用的函数
        methods: {
            makeActive: function(item){
                // 模型改变，视图会自动更新
                this.active = item;
            }
        }
    });
</script>

</body>
</html>