1. Vue.js – Instalación, data binding y algunas directivas.

Publicada el por

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

En el siguiente ejemplo puedes ver como se ejecuta y se comporta:

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.