Estas empezando con Vue JS, pues en este artículo te vamos a brindar una breve pero precisa introducción al manejo de este poderoso Framework JavaScript, actualmente con mucha demanda de mercado para el desarrollo FrontEnd.
También puedes revisar el artículo en donde hablamos sobre ¿Qué es Vue JS?, un inicio rápido a este poderoso Framework JS.
Lo mas impresionante de Vue.js es que toma lo mejor de otros marcos o Frameworks, incorporándolas de forma inteligente que hacen que no se note un desorden en su integración, lo que podemos destacar de Vue.js es:
- Un DOM Virtual con componentes reactivos que ofrece solo capa de visualización, y accesorios similares a los de React.
- Procesamiento condicional y servicios similares a los de Angular.
- Vue.js está inspirado en Polymer en términos de simplicidad y rendimiento.
Algunos de los beneficios de trabajar con Vue JS es que es un Framework con código limpio, mas ofertas de API semánticas, un mejor rendimiento que React, manejo de la vista aislada mejorando la forma de Angular, y muchos más que podemos seguir mencionando, pero te dejamos la información para que lo revisen por ustedes mismos.
Empezando con Vue JS
No podemos empezar sin antes hacer el clásico “Hola Mundo”, empezamos con ello para que entiendas un poco más sobre Vue.
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XxLrNB” default_tab=”js,result” user=”grovervast”]See the Pen <a href=’https://codepen.io/grovervast/pen/XxLrNB/’>HolaMundoVUE</a> by Grover V@squez (<a href=’https://codepen.io/grovervast’>@grovervast</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Si revisamos el código anterior podemos ver que definimos un “div” en nuestra HTML que tiene como valor del atributo id a “app”, y al momento de instanciar a Vue, vemos que en la propiedad “el”, se define el alcance de la instancia sobre el div en mención.
Seguidamente definimos un valor dentro del modelo, y para ello en el objeto data, definimos un valor “hola mundo” sobre text, y esto es renderizado utilizando {{}} desde la vista, y puede ver como vue lo trabaja de forma transparente.
Representación condicional
Vamos a suponer que tenemos un conjunto de elementos, que vamos a utilizar como elementos de navegación, que inclusive podemos reutilizar.
Podría tener sentido colocar los elementos en una matriz, para luego actualizarlo en algunos lugares, en Vanilla JS podríamo tener algo como lo que se indica a continuación:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LgKPXY” default_tab=”js,result” user=”grovervast”]See the Pen <a href=’https://codepen.io/grovervast/pen/LgKPXY/’>ListaVanillaJS</a> by Grover V@squez (<a href=’https://codepen.io/grovervast’>@grovervast</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Lo que vimos anteriormente funciona, pero hay que ser sinceros es un código un poco desordenado, y además complicado para algunas personas, hagamos lo mismo pero utilizando Vue.js:
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RezbvG” default_tab=”result” user=”grovervast”]See the Pen <a href=’https://codepen.io/grovervast/pen/RezbvG/’>ListaConVue</a> by Grover V@squez (<a href=’https://codepen.io/grovervast’>@grovervast</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]¿Qué tal la diferencia?, mucho mas declarativo, si ya trabajas con Angular, es posible que esto te parezca familiar. Una forma tan legible de renderizar de forma condicional.
Directivas en Vue JS
Vue.js maneja varias directivas que nos hacen la vida fácil al momento de hacer nuestros desarrollos, a continuación te vamos a dejar una muestra de las directivas más utilizadas, y es bueno que ustes se encuentre familiarizada con cada una de ellas:
| Nombre | Atajo | Propósito |
|---|---|---|
| v-if, v-else-if, v-else | Ninguna | Representación condicional |
| v-bind | : | Enlazar atributos dinámicamente, o pasar props. |
| v-on | @ | Adjunta un detector de eventos al elemento. |
| v-model | Ninguna | Crea enlace de dos vías |
| v-pre | Ninguna | Omitir compilación de contenido en bruto, puede aumentar el rendimiento |
| v-once | Ninguna | No volver a escribir |
| v-show | Ninguna | Mostrará u ocultará un componente / elemento en función del estado, pero lo dejará en el DOM sin desmontarlo (a diferencia de v-if) |
También hay modificadores de eventos realmente agradables y otras API para lograr un desarrollo acelerado:
- @mousemove.stop es comprable a e.stopProgration().
- @mousemove.prevent esto es como e.preventDefault().
- @submit.prevent, no volvera a cargar la página con el envío.
- @click.once, para no confundirse con v-once, este evento de click se activará una vez.
- v-model.lazy no llenará el contenido automáticamente, esperará hasta que se produzca un evento.
Control de Eventos
Vincular los datos es muy bueno, pero esto nos va llevar muy lejos si lo enlazamos con eventos, y eso es lo que vamos a cubrir ahora. Usaremos algunos para escuchar eventos DOM.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LXwNON” default_tab=”html,result” user=”grovervast”]See the Pen <a href=’https://codepen.io/grovervast/pen/LXwNON/’>Eventos Vue.js</a> by Grover V@squez (<a href=’https://codepen.io/grovervast’>@grovervast</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]Estamos creando un método llamado increment, y puede ver que esto se enlaza automáticamente thisy se referirá a los datos en esta instancia y componente. Me encanta este tipo de enlace automático, es muy agradable no tener console.logque ver a qué thisse refiere. Estamos usando la taquigrafía @clickpara enlazar al evento de clic aquí.
Los métodos no son la única forma de crear una función personalizada. También puede utilizar watch. La principal diferencia es que los métodos son buenos para cálculos pequeños y síncronos, mientras que watchson útiles para realizar más tareas o realizar operaciones asíncronas o costosas en respuesta a los datos cambiantes. Tiendo a usar el reloj más a menudo con animaciones.
Conclusión
Esto fue una pequeña introducción a Vue.js, uno de lo Frameworks que está teniendo mucha acogida y mucho desarrollo por delante, recuerda que puedes aprender más sobre este poderoso Framework siguiendo nuestro curso paso a paso.
También puedes revisar el artículo en donde hablamos sobre ¿Qué es Vue JS?, un inicio rápido a este poderoso Framework JS.
 | Aprende a crear sitios web modernos utilizando el Framework de Vue JS, y mejorar tus conocimientos, el curso inlcuye: - Utilizar Vue JS desde cero, vas aprendiendo paso a paso. - Que son las Directivas en Vue JS y como utilizarlas. - Componentes, VUE CLI, BootStrap, Vue-router, SPA y mucho más. - Curso Práctico con acceso ilimitado a las actualizaciones. - Soporte permanente sobre alguna consulta. - Certificado de finalización. |
Accede al curso de Vue JS | |
