Vue App简单首页

image.png

底部导航栏

    <nav :class="active">
            <a href="#" class="android" @click="makeActive('android')">android</a>
            <a href="#" class="ios" @click="makeActive('ios')">ios</a>
            <a href="#" class="kotlin" @click="makeActive('kotlin')">kotlin</a>
            <a href="#" class="web" @click="makeActive('web')">web</a>
        </nav>

    nav {
        width: 100%;
        display: inline-block;
        background-color: #5597b4;
        box-shadow: 0 1px 1px #ccc;
        position: fixed;
        bottom: 0;
    }

    /* padding 上左右下 */
    nav a {
        text-align: center;
        width: 25%;
        display: inline-block;
        padding: 18px 0px 18px 0px;
        color: #fff !important;
        font-weight: bold;
        font-size: 12px;
        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.android .android,
    nav.ios .ios,
    nav.web .web,
    nav.kotlin .kotlin {
        background-color: #e35885;
    }

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

    a:hover {
        text-decoration: none;
    }

引入四个页面（组件）,以及绑定样式

<script>
    import android from "../components/android.vue"
    import ios from "../components/ios.vue"
    import kotlin from "../components/kotlin.vue"
    import web from "../components/web.vue"
    export default {
        data() {
            return {
                active: 'android'
            };
        },
        components: {
            android,
            ios,
            kotlin,
            web
        },
        methods: {
            makeActive: function(item) {
                this.active = item;
                this.$router.push({
                    name: active
                })
            }
        }
    }
</script>

内容填充以及垂直居中

<template>
    <div id="android">
        <div class="middle">
            <p class="word">android</p><br />
            <p class="word">android developer</p>
        </div>
        <div style="position: absolute;top: 50%; background-color: blue; height: 1px; width: 100%;"></div>
    </div>
</template>

<style>
    html, body { height: 100%; }
    
    #android {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #f09529;
        background-color: red;
        display: table;

    }

    .middle {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: red;
    }

    .word {
        margin: 20px 20px 20px 20px;
        height: fit-content;
        color: lawngreen;
        font-size: 16px;
        vertical-align: middle;
        text-align: center;
        padding-block: unset;
    }
</style>

钩子函数

<script>
    export default {
        data() {
            return {

            }
        },
        beforeCreate() {
            console.log('android beforeCreate')
        },
        created() {
            console.log('android created')
        },
        beforeMount() {
            console.log('android beforeMount')
        },
        mounted() {
            console.log('android mounted')
        },

        beforeDestroy() {
            console.log('android beforeDestroy')
        },
        destroyed() {
            console.log('android destroyed')
        }
    }
</script>

单页面切换以及状态保存

    <keep-alive>
            <component :is="active"></component>
        </keep-alive>