Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Introducción a VueJS framework para el desarrollo FrontEnd

Introducción a VueJS framework para el desarrollo FrontEnd

Autor jc mouse martes, julio 9, 2019

Vue.js es un framework progresivo para la creación de interfaces de usuario de una sola página creado por Evan You. Pero VueJS también proporciona un montón de características para la construcción de componentes web reutilizables lo que permite desarrollar aplicaciones modularizadas y fácilmente escalables.

aprende VUE

Para comenzar a desarrollar con VueJS no hacen falta de muchos recursos en la PC ni siquiera de un IDE complejo, es más, podemos iniciar a desarrollar una app con un editor frontend online como codepen el cual tiene su interfaz dividido en tres secciones (HTML, CSS y JS) y en la parte inferior un campo para la vista previa que se actualizara automáticamente a cualquier cambio en los bloques de arriba mencionados,  ideal para nuestro trabajo con VueJS.

Editor FrontEnd

¿Que necesitas para desarrollar aplicaciones con Vue?

Vue es uno de los framework con una curva de aprendizaje más baja, sin embargo no es para novatos en desarrollo web ya que requiere conocimientos sólidos en HTML5, CSS y JavaScript si quieres comenzar desde un principio a sacarle provecho a Vue.

HOLA MUNDO

A continuación mostramos en unos cuantos pasos el desarrollo del clásico «Hola Mundo» con Vue utilizando el editor online de codepen.

Paso 1. Agregar VueJS

Clic sobre el icono que se encuentra a lado de JS para abrir el JS Settings del proyecto.

CDN JavaScript

donde:

  1. Escribe VUE y a continuación selecciona el primer ítem que aparece en la búsqueda (vue 2.6.10)
  2. El archivo vue.min.js se añade al proyecto
  3. Clic en el botón [CLOSE] para cerrar la ventana.

Si quieres agregar otras librerías JavaScript, solo debes repetir los pasos, lo mismo si deseas añadir librerías CSS como Bootstrap.

Paso 2. Los estilos CSS

Para este ejemplo no usamos ninguna otra librería más que CSS puro, nuestra hoja de estilos se reduce a declarar un div #app como se ve a continuación:

Estilos CSS

Paso 3. HTML

El HTML no contiene más que un DIV con el id=»app» y un texto encerrado entre dos llaves de la forma {{mensaje}}.

HTML5 y VueJS

Explicación:

  • El div: Es en este div con el id «app» donde se encontrara contenida nuestra aplicación y donde VUE tendrá control, es decir, establecemos los limites de nuestra app.
  • {{ mensaje }}: Esta etiqueta {{ }} le indica a Vue que es la parte dinámica de tu app y cuyos datos deben consultarse con el código JS.

En la parte inferior hasta el momento debes ser capaz de ver algo como esto:

interpolacion JS

Esto se debe a que hasta ahora solo hemos escrito CSS y HTML, nuestra pagina continua siendo estática.

Paso 4. Código JS

Para añadir dinamismo a nuestra app con Vue, debemos enlazar nuestros datos entre nuestra propiedad mensaje y el DOM (Document Object Model). El código es el siguiente:

Código JS

Explicación:

Lo que hace este código es, crear una nueva aplicación en la variable app instanciada a Vue, donde le pasamos un nuevo objeto en el argumento el, indicando entre comillas el div que creamos en la sección de HTML. A continuación, en una nueva propiedad llamada «data» declaramos la propiedad «mensaje» que contendrá el texto que queremos mostrar en el HTML entre las etiquetas {{ mensaje }}, a esto se le conoce como interpolación.

Pues bien, en la vista previa ahora podrás ver el saludo «Hola Mundo» que viene desde VueJS.

 

VueJS Bolivia

Hasta aquí una pequeña introducción al también pequeño pero poderoso framework de Vue. Si quieres conocer más sobre su creador, puedes visitar esta pagina freecodecamp donde se realiza una entrevista (en ingles) al joven Evan You

enjoy!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Introducción a los Gráficos en Pygame

Introducción a los Gráficos en Pygame

Antes de programar un videojuego, es necesario saber: Cómo representar figuras en la pantalla Cómo se manejan las coorde...

Gestión de productos – El modelo (Parte 4)

Gestión de productos – El modelo (Parte 4)

En la estructura del proyecto, nuestro modelo mvc esta compuesto por tres paquetes, la vista, el modelo y controlador. L...

Pruebas funcionales con AssertJ Swing

Pruebas funcionales con AssertJ Swing

AssertJ Swing es una biblioteca para Java que proporciona una interfaz fluida para la realización automatizada de prueba...

Descargar Doodle Google Pacman

Descargar Doodle Google Pacman

Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Como hacer una factura en Java (Proyecto)

Como hacer una factura en Java (Proyecto)

Tiempo atras me pidieron un ejemplo de como realizar un reporte con iReport tipo factura, recibo o como le llamen, compl...

Comparte lo que sabes

Categorias

Últimas entradas

En muchas ocasiones es necesaria la personalización de componentes java para que estos se adecuen a nuestros requerimien...

En este post mostramos como personalizar el Header (encabezado) de un componente JTable en Java colocando iconos, centra...

El JTable de Java es un gran componente para mostrar datos en una tabla de una forma rápida y sencilla, sin embargo en v...

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

Herramientas

Generador de Enlaces a Whatsapp