1. Vue.js – Instalación, data binding y algunas directivas.
¿Qué es Vue?
Vue es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks, Vue está diseñado desde cero para ser adaptable progresivamente.
La biblioteca central está enfocada solo en la capa de visualización, y es fácil de seleccionar e integrar con otras bibliotecas o proyectos existentes.
La forma más fácil de probar Vue es creando un archivo .html e incluir el siguiente script:
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
A continuación un pequeño ejemplo del uso de Vue:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hola VUE</title> </head> <body> <!-- Definimos el tag que usaremos para la instancia de VUE (contexto donde puede acceder VUE) --> <div id="container"> <!-- Modelo, usandpo "{{}}" VUE cuando encuentre las llaves va a buscar en el modelo para sustituir por el valor --> <h1>{{ mensaje }}</h1> </div> <!-- Incluir VUE --> <script src='https://cdn.jsdelivr.net/npm/vue'></script> <!-- Para evitar tener multiples ficheros y ver el ejemplo mas claro añadire el código JS dentro del propio HTML --> <script> // Instancia de VUE var app = new Vue({ // Elemento que afecta VUE el: "#container", // Modelo, la fuente de datos data: { mensaje: "Hola mundo, VUE" } }) </script> </body> </html>
Enhorabuena, ¿y ahora que?
¡Ya hemos creado nuestra primera aplicación Vue!. Los datos y el DOM ahora están vinculados y todo ahora es reactivo. ¿Como sabemos que es cierto esto?, abre la consola de JavaScript de su navegador (en este momento, en esta página) y establezca el app.mensaje en un valor diferente. Debería ver el ejemplo renderizado arriba actualizarse. Ahora vamos a complicar el código un poquito añadiendo data binding en ambas direcciones:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hola VUE</title> </head> <body> <!-- Definimos el tag que usaremos para usar la instancia de VUE (contexto donde puede acceder VUE) --> <div id="container"> <!-- Modelo --> <h1>{{ mensaje }}</h1> <!-- Elemento que usaremos para enlazar la vista con el modelo, usando la directiva v-model --> <input type="text" v-model="mensaje"> <!-- Usando esa directiva automáticamente nos crea un enlace con nuestro modelo, pudiendo modificar el propio modelo --> </div> <!-- Incluir VUE --> <script src='https://cdn.jsdelivr.net/npm/vue'></script> <!-- Para evitar tener multiples ficheros y ver el ejemplo mas claro añadire el código JS dentro del propio HTML --> <script> // Instancia de VUE var app = new Vue({ // Elemento que afecta VUE el: "#container", // Modelo, la fuente de datos data: { mensaje: "Hola mundo, VUE" } }) </script> </body> </html>
Bien, ahora que ya conocemos un poco más VUE vamos a empezar a crear cosas mas llamativas y comprobar la potencia que ofrece mediante ejemplos.