Comenzar con Vue.js

VueJSCuando 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:

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

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.