El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Vinculación de Datos

Siguiente ►
►

La vinculación de datos es uno de los conceptos fundamentales en Vue.js. Permite que los datos del modelo y la vista se mantengan sincronizados de manera eficiente. En esta sección, aprenderás cómo funciona la vinculación de datos en Vue.js y cómo puedes utilizarla para crear aplicaciones reactivas.

Conceptos Clave

  1. Interpolación: Utiliza la sintaxis de doble llave {{ }} para mostrar datos en el HTML.
  2. Directiva v-bind: Vincula atributos de HTML a datos de Vue.
  3. Directiva v-model: Crea una vinculación bidireccional entre el modelo y la vista.

Interpolación

La interpolación es la forma más básica de vinculación de datos en Vue.js. Permite insertar datos dinámicos en el HTML.

Ejemplo

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hola, Vue.js!'
    }
  });
</script>

Explicación

  • {{ message }}: Esta es la sintaxis de interpolación. Vue.js reemplaza {{ message }} con el valor de message en el objeto data.
  • new Vue({ ... }): Crea una nueva instancia de Vue y la asocia con el elemento DOM con el id app.

Directiva v-bind

La directiva v-bind se utiliza para vincular atributos de HTML a datos de Vue.

Ejemplo

<div id="app">
  <img v-bind:src="imageSrc" alt="Imagen de Vue.js">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imageSrc: 'https://vuejs.org/images/logo.png'
    }
  });
</script>

Explicación

  • v-bind:src="imageSrc": Vincula el atributo src del elemento img al valor de imageSrc en el objeto data.
  • Cuando imageSrc cambia, el atributo src del elemento img se actualiza automáticamente.

Directiva v-model

La directiva v-model se utiliza para crear una vinculación bidireccional entre el modelo y la vista. Es especialmente útil en formularios.

Ejemplo

<div id="app">
  <input v-model="message" placeholder="Escribe algo">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

Explicación

  • v-model="message": Vincula el valor del campo de entrada al dato message en el objeto data.
  • Cuando el usuario escribe en el campo de entrada, el valor de message se actualiza automáticamente y viceversa.

Ejercicios Prácticos

Ejercicio 1: Interpolación Básica

Crea una aplicación Vue que muestre un mensaje de bienvenida utilizando interpolación.

Solución

<div id="app">
  <h1>{{ welcomeMessage }}</h1>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      welcomeMessage: '¡Bienvenido a Vue.js!'
    }
  });
</script>

Ejercicio 2: Uso de v-bind

Crea una aplicación Vue que muestre una imagen utilizando la directiva v-bind.

Solución

<div id="app">
  <img v-bind:src="imageUrl" alt="Imagen de ejemplo">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imageUrl: 'https://vuejs.org/images/logo.png'
    }
  });
</script>

Ejercicio 3: Uso de v-model

Crea una aplicación Vue que tenga un campo de entrada y un párrafo que muestre el texto ingresado en el campo de entrada utilizando v-model.

Solución

<div id="app">
  <input v-model="userInput" placeholder="Escribe algo">
  <p>{{ userInput }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      userInput: ''
    }
  });
</script>

Resumen

En esta sección, hemos aprendido sobre la vinculación de datos en Vue.js, incluyendo la interpolación, la directiva v-bind y la directiva v-model. Estos conceptos son esenciales para crear aplicaciones reactivas y dinámicas con Vue.js. En la próxima sección, exploraremos las propiedades computadas y los observadores, que nos permitirán manejar datos derivados y reaccionar a cambios en los datos de manera más eficiente.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados