Durante la carga de una aplicación web con Vue.JS suele ocurrir que se muestran por un instantes partes de la interfaz de usuario y etiquetas {{}} que no queremos que se muestren.
Una forma sencilla es utilizando la directiva de Vue.JS v-cloak
Actualización: Este y este enlace describen otras formas de convertir esto en un no-problema.
El siguiente código adaptado de un artículo en Medium muestra una forma sencilla. Simplemente definimos un estilo para la directiva [v-cloak] y luego aplicamos la directiva en nuestra app de Vue.JS
Esta directiva es aplicada al elemento que la contiene mientras este no haya sido compilado por Vue.JS
<style> [v-cloak] > * { display:none; } [v-cloak]::before { content: "loading..."; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> <div id="app" v-cloak> <h1>Very Simple App</h1> <p> ¡Hola, {{name}}! </p> </div> <br> <button onclick="loadApp()">Load App</button> <script> function loadApp () { new Vue({el: '#app', data: {name: 'Joselito'}}) } </script>Haz clic acá para ver la implementación funcionando
Very Simple App
¡Hola, {{name}}!
— Fin —
6,897 total views, 1 views today
Comentarios