Vamos a ver ahora como enlazar atributos a nuestras etiquetas HTML. Vamos a ver como enlazar el src de una etiqueta img con una propiedad de nuestro data(). Esto quiere decir que cuando el valor enlazado al src cambie, nuestra imagen se actualizará en el DOM.
Preparamos el proyecto
Vamos a cambiar un poco nuestra estructura del proyecto. Para ello vamos a crear una carpeta en nuestro proyecto para los assets, la cual contendrá por el momento, otra carpeta que llamaremos img con un par de imágenes (las que queráis). También añadiremos un styles.css que nos hará falta en el futuro. La estructura de carpeta debería quedar algo así (ver imagen). También vamos a cambiar un poco nuestro index.html. Quedaría así (ver código, marcadas las lineas que cambiaron)
[html title=»index.html» firstline=»1″ highlight=»7,12-21″]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Introducción a Vue 3 – Coding Around the World!</title>
<!– Importar Estilos –>
<link rel="stylesheet" href="./assets/styles.css" />
<!– Importar Vue.js –>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div class="player">
<div class="player-avatar">
<!– La imagen va aqui–>
</div>
<div class="player-info">
<h1>{{ player }}</h1>
</div>
</div>
</div>
<!– Vue App –>
<script src="./app.js"></script>
<!– Mount Vue App –>
<script>
const mountedApp = app.mount("#app")
</script>
</body>
</html>
[/html]
Añadir una imagen a nuestro data
Ahora que ya tenemos la imagen que queremos mostrar en nuestra ruta: './assets/img/avatar-1.png' lo único que tenemos que hacer es crear una nueva propiedad imgSrc con nuestra imagen.
[js title=»app.js» highlight=»5″]
const app = Vue.createApp({
data() {
return {
player: ‘Héctor Menduíña Hermelo’,
imgSrc: ‘./assets/img/avatar-1.png’
}
}
})
[/js]
Una vez hecho esto estamos preparados para poder añadir la etiqueta img en nustro HTML.
[html]
<div class="player-avatar">
<img src="imgSrc">
</div>
[/html]
Enlazamos el src de la etiqueta con nuestra variable en el imgSrc pero por el momento esto no hace nada. Vue todavía no sabe que nosotros queremos enlazar ambas. ¿Cómo se lo decimos a Vue?
Intro a enlaces de atributos
Para enlazar un atributo de una etiqueta HTML con un valor del data() de nuestra App vamos a usar una de las muchas directivas que Vue trae incorporadas llamada v-bind
[html]
<img v-bind:src="imgSrc">
[/html]
De esta manera creamos un enlace «reactivo» entre el atributo src de la etiqueta img y nuestra propiedad imgSrc. Ahora ya podemos abrir nuestro index.html en el navegador y comprobar si esto es verdad. Debería salir algo similar a esto:
Vamos a ver como funciona v-bind
¿Cómo funciona exactamente? Usamos la directiva v-bind para vincular dinámicamente el atributo src con el valor que va entre comillas "imgSrc". Esto lo que hace es decirle a Vue que tiene que evaluar el valor del src como una expresión de JS.
Esto quiere decir que gracias al sistema de reactividad de Vue si cambiamos el valor de nuestra propiedad imgSrc en el data() y abrimos el index.html en el navegador veremos que nuestra imagen se ha actualizado correctamente.
Usar v-bind es algo muy normal y recurrido en cualquier app hecha con Vue, por lo tanto nos ofrece un atajo para simplificar esto, y es sustituir v-bind por solo : . Como te puedes imaginar hay muchos atributos HTML diferentes tales como class, href, type, etc. Todos los atributos HTML pueden ser enlazados mediante v-bind o :
[html]
<img :src="imgSrc" :class="imgClass">
<input :type="inputType" />
<a :href="hrefLink">
[/html]
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!