Primera aplicación en Vue.js

Author
By Darío Rivera
Posted on 2020-06-07 in Vue.js

En nuestro artículo anterior vimos una Introducción a Vue.js en donde abarcamos algunas de las características más importantes de este framework. El día de hoy crearemos nuestra primera aplicación en Vue.js, el clásico "Hola mundo!".

El primer paso consiste en agregar el framework desde la red de entrega de contenidos. Puedes agregar el script para desarrollo así.

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

O agregar la versión de producción de la siguiente manera.

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

El siguiente paso consisten en indicar un contexto, o lo que es lo mismo indicar en qué parte del DOM va a funcionar Vue. Para esto basta asignar un id a un elemento del DOM.

<div id="app">
  {{ '\{\{ message \}\}' }}
</div>

El contenido del elemento div contiene el código necesario para imprimir el valor de la variable mensaje. Pero dónde está definida esta variable y este contexto ?. La respuesta es simple, un script de Vue en donde se define el elemento y la data que está disponible.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
});

El HTML final debería ser similar al siguiente.

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

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello World!'
      }
    })
  </script>
</body>
</html>

El resultado final será el texto Hello World! renderizado en el navegador. Recuerdas nuestra Introducción a Vue.js en donde especificamos que Vue.js era un framework reactivo ?. Pues veamos que el HTML cambia a medida que cambia la data en Vue. Si ejecutas el siguiente código en el navegador, que básicamente cambia la data, podrás ver cómo cambiar el texto en el HTML también.

app.message = 'Nuevo Texto!'

Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.