En esta primera entrada sobre Vue.js 2 vamos a ver qué es, como instalarlo para comenzar a utilizarlo y también crearemos el primer ejemplo.
Vue.js es una framework JavaScript que nos permite crear interfaces de usuario a partir de componentes y así desarrollar SPA (Single Page Application) o aplicaciones web fácilmente.
Nota: para seguir esta serie hay que tener conocimientos en HTML, JS y CSS.
Nota: para realizar este artículo he seguido la documentación oficial de Vue.js.
Instalación
Por ahora, instalaremos Vue.js de la manera más fácil que nos provee, ya que para empezar a utilizarlo no necesitamos más. Lo que haremos es insertar este enlace que nos pone en la documentación en nuestro HTML:
|
1 |
<script src="https://unpkg.com/vue"></script> |
Al insertar este enlace, siempre tendremos incrustado la última versión que se encuentre en NPM. Si quisieramos una version especifica tendríamos que ponerlo de esta manera sustituyendo x.x.x por la versión que queremos:
|
1 |
<script src="https://unpkg.com/vue@x.x.x"></script> |
Como ya he dicho, hay varias formas de instalarlo. Más adelante ya veremos como instalarlo a través de la línea de comandos.
Comenzamos
Para comenzar a utilizarlo, vamos a crear el primer ejemplo que pone en la documentación, que es súper simple.
En nuestro HTML, añadimos este código en el body:
|
1 2 3 |
<div id="app"> {{ message }} </div> |
Ahora vamos a añadir el código JavaScript y lo podemos hacer de dos maneras, como debes saber, o creamos un archivo JS con el código y lo incrustamos en el HTML o creamos un tag script y le añadimos este código:
|
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { message: 'Hola! Este es nuestro primer ejemplo con Vue.js 2.' } }) |
Abre el HTML en el navegador y verás el mensaje que hemos puesto. Ya hemos creado nuestro primer ejemplo con Vue.js!
Vamos a explicar un poco lo que pasa. El HTML tiene un tag div que dentro tiene {{ message }} , ésto son datos que vienen de Vue.js y que se declaran a través del objeto data. Por tanto, lo que se está haciendo en el código JavaScript es crear una instancia de Vue.js con new Vue({...})entonces se asocia al div con #app a través de la propiedad el y la propiedad data son los datos por defecto que tendrá esta instancia. Éstos datos podrán ir cambiando de valor (a través de inputs, textarea, checkbox, etc.) y se reflejará automáticamente en la vista, ya que lo que se declara en el objeto data es reactivo (ésto lo veremos en la siguiente entrada).
Puedes ver el ejemplo aquí:
See the Pen Vue.js #1 by vreaxe (@vreaxe) on CodePen.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR