La directiva v-bind

En pocas palabras esta directiva nos permitirá hacer un enlace de datos a un atributo de un elemento, analizemos brevemente algunos ejemplos de la guía oficial de Vue.

<!-- bind an attribute -->
<img v-bind:src="imageSrc">
<!-- shorthand -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- DOM attribute binding with prop modifier -->
<div v-bind:text-content.prop="text"></div>

Es importante hacer mención a la forma corta de usar la directiva v-bind y sencillamente se hace enteponiendo : al atributo que queramos manipular, por ejemplo si queremos manipular la propiedad style de algun elemento sería :style.

El código anterior nos muestra un bindeo (si la palabra está bien dicha :) si no, apliquemos ese termino con un fin didactico) de datos a enlazar con un atributo en particular.

Primeramente tenemos un enlace al atributo src con una variable, en conclusión esa variable se encuentra en nuestro objeto de datos cuyo valor sería un enlace o URL. Posterior a ello se muestra la forma corta de usar el v-bind y después una expresión JavaScript en la cual en una cadena definimos parte de un path concatenando el nombre del archivo.