Si ya conoces un poco de programación, habrás notado que cuando estás aprendiendo un nuevo lenguaje o framework es clásico realizar el famoso “Hola mundo” que es regularmente el primer ejercicio que se realiza para ver el funcionamiento básico de dicho lenguaje.

Así que siendo fieles a eso, empezaremos con un vistazo de Vue y nuestro primer Hola mundo. Veamos:

Empecemos por mostrar la estructura básica de la implementación de vue. Necesitamos 2 partes importante:

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<p>{{message}}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

Js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Bien, es todo, ahora explico que quiere decir cada parte de código.

  • En la parte de html, estamos definiendo un div con el id="app", esto para poder identificarlo eh indicarle a vue en dónde deberá inicializarse.
  • A continuación de nuestro div, agregué una url para cargar un script, que no es más que Vue, siendo llamado desde una CDN (Algo así como un repositorio desde donde podemos cargar el framework).
  • Una vez cargado el archivo de Vue, procedemos a la parte Js, en donde lo que estamos haciendo en primer lugar es crear una nueva instancia de vue new Vue({...}).
  • Lo siguiente es indicarle a Vue algunos parámetros que son lo mínimo que necesita para poder empezar a funcionar, en este caso configuramos dos cosas; la primer es el attributo el, que como mencioné antes, es lo que le indica a vue cuál será el elemento root en el cual puede inicializarse. En este caso es nuestro div con id app. el: '#app'.
  • Lo siguente es configurar nuestro atributo data, que es algo así como nuestro contenedor de infomación, donde declaramos las variables que vamos a utilizar en nuestra aplicación, en este caso message: 'Hello Vue.js!'. Donde message es la variable accesible.
  • Por último, regresamos a nuestro html y podemos observar que hay una linea con lo siguiente <p>{{message}}</p>, de acuerdo a lo que explicamos en el punto anterior, significa que {{message}} será sustituido por Hello Vue.js!. De eso se encarga Vue, puedes estar tranquilo y observar como funciona.

Así que, vamos a ver un ejemplo de esto en funcionamiento.

Con eso finalizamos el primer capítulo, aunque es bastante básico, espero que la explicación paso a paso te haya permitido comprender el funcionamiento de Vue. Nos vemos en el siguiente capítulo que dejaré por aquí en cuanto esté listo.

Puedes dejar tus comentarios y sugerencias en la parte de abajo. Saludos!