Vue官网实例

最新推荐文章于 2024-07-23 17:22:52 发布

永恒 Eternally

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量1.7k

点赞数 1

分类专栏：技术分享前端Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_50648993/article/details/123358763

版权

技术分享同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端Vue

4 篇文章 0 订阅

订阅专栏

Vue官网实例

此篇博客为Vue官网中的一个实例，增加了一点点注解，方便日后回顾复习，个人认为此实例特别精简，涉及到Vue基础的大部分内容，很有参考价值。
主体代码直接引自动态组件实例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2"></script>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }

        .tab-button:hover {
            background: #e0e0e0;
        }

        .tab-button.active {
            background: #e0e0e0;
        }

        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="dynamic-component-demo" class="demo">
        <!-- 进行一个绑定事件 
             动态绑定class属性，激活的button的class属性为：tab-button active
        -->
        <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]"
            v-on:click="currentTab = tab">{{ tab }}</button>
        <!-- 通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现： -->
        <component v-bind:is="currentTabComponent" class="tab"></component>

    </div>
</body>
<script>
    Vue.component("tab-home", {
        template: "<div>Home component</div>"
    });
    Vue.component("tab-posts", {
        template: "<div>Posts component</div>"
    });
    Vue.component("tab-archive", {
        template: "<div>Archive component</div>"
    });

    new Vue({
        el: "#dynamic-component-demo",
        data: {
            currentTab: "Home",
            tabs: ["Home", "Posts", "Archive"]
        },
        // 计算属性
        computed: {
            currentTabComponent: function () {
                return "tab-" + this.currentTab.toLowerCase();
            }
        }
    });
</script>

</html>