¿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:
var 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