Generic Category (Spanish)300x250

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.

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 Frmaework 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.

See the Pen HolaMundoVUE by Grover V@squez (@grovervast) on CodePen.dark

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:

See the Pen ListaVanillaJS by Grover V@squez (@grovervast) on CodePen.dark

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:

See the Pen ListaConVue by Grover V@squez (@grovervast) on CodePen.dark

¿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:

NombreAtajoPropósito
v-if, v-else-if, v-elseNingunaRepresentación condicional
v-bind:Enlazar atributos dinámicamente, o pasar props.
v-on@Adjunta un detector de eventos al elemento.
v-modelNingunaCrea enlace de dos vías
v-preNingunaOmitir compilación de contenido en bruto, puede aumentar el rendimiento
v-onceNingunaNo volver a escribir
v-showNingunaMostrará 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.

See the Pen Eventos Vue.js by Grover V@squez (@grovervast) on CodePen.0

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.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies