Truco de Vue 01

Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo

¿Tus usuarios tienen conexión lenta? ¿Vue.js no se definió correctamente? ¿Detestas el DOM pre-render?

Así se vería Google antes de cargar Vue.js (si lo usara…)

Pues te tengo la solución a tus problemas: ¡v-cloak!

En la lista de directivas de Vue.js encontramos v-cloak, pero puedo asegurar que muy pocas personas le prestan atención.

Lo único que hace esta directiva es desaparecer. Sí, desaparecer y ya. Cuando Vue.js es invocado se encarga, entre otras cosas, de quitar todos los v-cloak que haya dentro del elemento HTML que inicialices.

Ten en cuenta que v-cloak no se pone por defecto en todos lados, tú debes ponerla y sólo es válido en elementos dentro del que inicializas, no aplica sobre él mismo.

Si esto lo combinas con una regla de CSS puedes ocultar todos los elementos que no estén listos.

 

¡Voilá! Con esta solución super-simple te olvidas de tener HTML que no esté listo sin pegarle al performance de tu app.

Si tienes dudas sobre Vue.js o cosas raras que te gustaría hacer y no sabes cómo, déjame un comentario para tenerlo en cuenta para los próximos Trucos de Vue.

– Enrique D.

3 comentarios en “Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo”

  1. Como cargar una data en un div que no sea a traves de JQuery $(‘#div’).html(response.data) en vue con axios. ¿Cómo seria con axios?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *