vue + JS-monitorización en tiempo real altura de la pantalla DIV objetivos centrados verticalmente

Como siempre, GIF mirada

código

html

estilo front-end BootstrapV3 al uso, a partir de la altura al obtener #main con $('#main').height()los resultados obtenidos han sido 0, después de navegar por Internet para encontrar una solución: añadir a la DIV objetivo de overflow: hiddenestilo,No estoy específicamente dedicada a la delantera, no pensar acerca de por qué

<div id="main" style="overflow: hidden" :style="mainStyle">
    <div class="col-sm-4 col-sm-offset-4">
        <div class="form-group">
            <img src="/img/lalafaye-vector.png" style="width: 100%">
        </div>
    </div>
    <div class="col-sm-2 col-sm-offset-5">
        <div class="form-group">
            <input v-model="password" name="password" type="password" class="form-control" placeholder="password">
        </div>
        <div class="form-group">
            <button @click="login()" class="btn btn-success" style="width: 100%">LOG IN</button>
        </div>
    </div>
</div>

js

Utilice window.onresizeescuchar los cambios de altura de la ventana del navegador, recuperar la altura de la ventana, restablezca #mainlos márgenes, es decir,(当前窗口高度 - 目标DIV高度) / 2

moutedCódigo del ciclo en el createdciclo son posibles

var vue = new Vue({
    el: '#app',
    data: {
        password: '',
        mainStyle: {
            marginTop: ''
        },
        mainHeight: $('#main').height()
    },
    methods: {
        login: function () {
            axios
                .post(
                    '/login',
                    Qs.stringify({username: 'admin', password: this.password})
                )
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log(error);
                });
        },
        setMainMarginTop: function () {
            let currentScreenHeight = $(window).height() || $(document).height();
            this.mainStyle.marginTop = (currentScreenHeight - this.mainHeight) / 2 + 'px';
        }
    },
    watch: {
    },
    created: function () {
        this.setMainMarginTop()
    },
    mounted: function () {
        window.onresize = () => {
            this.setMainMarginTop()
        }
    }
});