Comenzar con Vue.js

Cuando hablamos de Vue.js nos encontramos con un framework progresivo que facilita la escalabilidad de nuestros proyectos, en lo que JavaScript se refiere.

¿Cómo comenzar con Vue.js? El primer paso es aprender a incorporarlo en nuestro proyecto.

Si utilizamos Node.js podremos recurrir al manejador de paquetes para instalarlo, como vemos a continuación: npm install vue.

Si deseamos descargarlo, podremos obtenerlo en el repositorio de GitHub: https://github.com/vuejs/vue. En la carpeta dist del repositorio encontramos los archivos del core, y podremos obtener la versión minificada denominada vue.min.js.

Para incorporarlo en nuestro proyecto, lo ubicamos en una carpeta (por ejemplo la carpeta js) y lo llamamos desde nuestro código como vemos en el siguiente ejemplo:

<script src="js/vue.min.js"></script>.

Escribir nuestro primer código con Vue.js

Una vez que Vue.js está incorporado en nuestro proyecto ya estamos en condiciones de escribir nuestro primer código. En este caso lo separaremos en dos partes. Primer el bloque HTML que mostrará lo que deseamos. En este caso será un párrafo con una id:

<p id="prueba"> {{ mensaje}} </p>

En este ejemplo vemos que con doble llave encerramos un término al que llamamos mensaje. Eso será reemplazado por Vue.js, escribiendo lo que deseamos. Para lograr esto, ahora en nuestro script, escribimos:

const aplicacion = new Vue({
  el: '#prueba',
  data: {
      mensaje: 'Este es un mensaje de prueba'
  }
})


El código anterior en primer lugar crea una instancia de Vue, indica la id del elemento en el cual se mostrará el resultado (en este caso prueba) y, luego, indica la información que se escribirá, mediante data.

Si probamos el ejemplo en el navegador, deberíamos ver un párrafo con el texto: Este es un mensaje de prueba

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.