Binding de atributos con v-bind en Vue.js

Vue.js ofrece dos tipos de binding, unidireccional y bidireccional. En este tutorial vamos a ver el binding unidireccional, que se realiza con la directiva v-bind.

El binding es un concepto existente en muchos frameworks y tecnologías, que nos permite mantener sincronizado el valor de dos variables.

En Vue.js el binding no va a permitir conectar los datos de la JavaScript con el HTML. Es decir, nos permite utilizar variables de la lógica en el HTML.

Unido a la reactividad, el binding nos permite crear aplicaciones dinámicas donde los cambios en los datos se reflejan automáticamente en la vista.

Directiva v-bind

En Vue.js, v-bind es la directiva que nos permite realizar un binding unidireccional, que nos permite enlazar dinámicamente atributos HTML o propiedades de componentes con datos de la instancia de Vue.

Es decir, podemos hacer que cualquier atributo del HTML (como src, href, class, o style), dependa de una variable o expresión reactiva.

La sintaxis de la directiva es poner v-bind, seguida de dos puntos : y nombre del atributo que queremos bindear (v-bind, v-bind…).

Por ejemplo, asi

<template>
  <img v-bind:src="imageUrl" alt="Imagen dinámica">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://imagenesinventadas.com/luisllamas.jpg');
</script>

Alias simplificado

El binding de atributos es tan frecuente Vue proporciona un alias simplificado usando los dos puntos (:).

<!-- esto es equivalente -->
<a :href="enlaceUrl">Visita Vue.js</a>

<!-- a esto -->
<a v-bind:href="enlaceUrl">Visita Vue.js</a>

Es decir, que el ejemplo anterior normalmente lo escribiríamos así,

<template>
	<!-- usamos simplemente : -->
  <img :src="imageUrl" alt="Imagen dinámica">
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://imagenesinventadas.com/luisllamas.jpg');
</script>

Binding de clases y estilos

El binding de atributos también nos permite vincular estilos o clases de manera dinámica (no dejan de ser atributos sin mas).

Usaremos esto frecuentemente para dar estilo dinámicamente a nuestros componentes. Por ejemplo,

<template>
  <div :class="{ activo: isActive }" :style="{ color: textColor }">
    Este es un texto dinámico
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(true);
const textColor = ref('red');
</script>

Uso de v-bind en nuestros componentes Avanzado

También podemos v-bind en para pasar datos a un componentes hijo, junto con lo que llamamos Props (lo veremos al hablar de componentes).

<template>
  <div>
    <p>Nombre: {{ name }}</p>
    <p>Edad: {{ age }}</p>
  </div>
</template>

<script setup>
defineProps({
  name: String,
  age: Number,
});
</script>

<template>
  <ChildComponent :name="userName" :age="userAge" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const userName = ref('Juan');
const userAge = ref(25);
</script>