Hola Mundo! con Vue.js

Detalles: Publicado: Miércoles, 26 Junio 2019 09:06; Escrito por Javier Koroll

La popularidad de Vue.js no para de crecer y cada vez son más los que optan por este framework para trabajar en el frontend. Su suave curva de aprendizaje, el respaldo de una gran comunidad y una documentación oficial completa y fácil de entender, lo convierten en el framework predilecto a la hora iniciarse en el desarrollo de interfaces de usuario. Pero ¿Que es Vue.js? ¿Qué nos permite hacer? En este artículo abordaremos estas cuestiones y desarrollaremos el clásico ejemplo de la programación “hola, mundo”.

¿Qué es Vue.js?

Vue es un framework progresivo, diseñado para el desarrollo de interfaces de usuario.

Esto quiere decir que las funcionalidades principales están contenidas en una librería muy pequeña (apenas 20 Kb) y que se puede ir añadiendo otras librerías a medida que se necesiten. A diferencia de otros frameworks, las librerías están muy bien desacopladas y nos permiten construir mediante este esquema progresivo aplicaciones muy livianas y con un gran rendimiento.

Otra característica importante de Vue es que mediante una sintaxis de plantilla nos permite presentar de forma declarativa los datos al DOM. Además, los datos y el DOM se vinculan en forma reactiva, cualquier cambio en estos se verá reflejado inmediatamente en la vista.

Vamos a realizar entonces nuestro primer programa en Vue y veremos lo fácil que es vincular los datos y el DOM en este framework.

¡Empecemos!

Primero, creamos el siguiente index.html:

<!DOCTYPE html>
<html Lang="es">
<head>
	<meta charset="UTF-8"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hola mundo con Vue.js!</title>
</head>
<body>
	<div>
		<h1></h1>
	</div>
</body>
</html>

Agreguemos Vue

Basta solamente con agregar el siguiente CDN:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Existen otras opciones para instalar Vue pero esta es la más práctica a la hora de empezar a conocer el framework.

Creemos una instancia de Vue

Cada aplicación comienza creando una instancia de Vue a la cual se le pasa un objeto JavaScript plano con un conjunto de opciones. Dentro de estas opciones se destacan dos elementos:

el, que nos permite indicarle a la instancia de Vue, por medio de un selector, la parte del DOM con la que vamos a trabajar; y data, que contendrá en definitiva los datos vinculados a la representación del DOM seleccionada.

Volviendo al código, agregaremos al <div> un id=’app’ para referenciarlo en la instancia que crearemos de Vue de la siguiente manera:

app = new Vue({
	el: '#app’,
	data: {
		titulo: 'Hola, mundo!'
	}
})

Y lo incorporaremos al html por medio de la etiqueta <script>:

<!DOCTYPE html>
<html Lang="es">
<head>
	<meta charset="UTF-8"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hola mundo con Vue.js!</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id='app'>
		<h1></h1>
	</div>
	
	<script>
		app = new Vue({
			el: '#app',
			data: {
				titulo: 'Hola mundo!'
			}
		})
	</script>
</body>
</html>

Finalmente, solo hay que utilizar la propiedad titulo del objeto data en nuestro html. Y es aquí donde entra el concepto de interpolación.

Interpolación

La forma más básica de enlace de datos es la interpolación de texto usando la sintaxis de doble llave {{}}.

Llevando esto a nuestro código, la etiqueta <h1> quedaría como se muestra a continuación:

<h1>{{titulo}}</h1>

El código html se convierte entonces en una especie de témplate que permite enlazar de forma declarativa el DOM representado a los datos de la instancia Vue subyacente.

<!DOCTYPE html>
<html Lang="es">
<head>
	<meta charset="UTF-8"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hola mundo con Vue.js!</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id='app'>
		<h1>{{titulo}}</h1>
	</div>
	
	<script>
		app = new Vue({
			el: '#app',
			data: {
				titulo: 'Hola mundo!'
			}
		})
	</script>
</body>
</html>

Finalmente, nuestro código está listo. Y cualquier cambio en la propiedad título se vera reflejada en la página. Puedes comprobar esto abriendo la página e ingresando a la consola del navegador. Al escribir app.titulo=”bienvenidos” verás cómo se actualiza el título con el nuevo contenido.

Algo que llama inevitablemente la atención es ver el código javascript junto con el HTML en un mismo archivo. La filosofía de Vue apunta a que la separación de las preocupaciones no es igual a la separación de tipos de archivo. Y que en lugar de dividir el código base en tres grandes capas que se entrelazan entre sí, tiene mucho más sentido dividirlos en componentes débilmente acoplados y componerlos.

Por último, cabe mencionar que Vue no sólo permite enlazar datos al texto sino también a los atributos y su estructura.

En los próximos artículos estaremos escribiendo sobre estos temas y conoceremos más sobre el desarrollo basado en componentes que nos propone el framework.