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.
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.
¿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.
donde:
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:
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}}.
Explicación:
En la parte inferior hasta el momento debes ser capaz de ver algo como esto:
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:
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.
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!
¿Qué es un Trait en Laravel? Los Trait son una forma que laravel tiene para reutilizar el código, son similares a las cl[...]
Una Interface Funcional es una interface que contiene uno y solo un método abstracto aunque puede contener métodos por d[...]
Quasar es un proyecto Open Source basado en el Framework Vue que nos permite desarrollar proyectos de todo tipo, por eje[...]
Messenger Rooms es la nueva opción de videoconferencias de Facebook que permite realizar videollamadas con hasta 50 pers[...]
Magic Button, es un botón animado para android bajo licencia del MIT desarrollado por Bloder (Brasil), el proyecto esta[...]
Los objetos como JLabel o JButton nos permiten hacer uso de código CSS en su propiedad TEXT, asi podemos adornar el text[...]