En la segunda lección hablaremos sobre el enlace de atributos, sobre la conexión de datos almacenados en una instancia de Vue a atributos de elementos HTML. → Primera lección
El proposito de la leccion
Aquí veremos cómo mostrar una imagen y establecer el texto del atributo utilizando el enlace de atributo
alt. Tomaremos los datos relevantes de la instancia de Vue.
Código inicial
Comencemos con
index.htmlel <body>siguiente código HTML, ubicado en el archivo , en la etiqueta :
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
Presta atención a la etiqueta
<div>con la clase product-image. Contiene el elemento <img>al que queremos unir dinámicamente los datos necesarios para mostrar la imagen.
Un elemento
<div>con una clase se product-infoutiliza para mostrar el nombre de un producto.
Aquí está el JavaScript contenido en el archivo
main.js:
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
Tenga en cuenta que el objeto
dataahora tiene una nueva propiedad que imagecontiene la ruta a la imagen.
→ El CSS utilizado en este tutorial se puede encontrar aquí .
Para conectar el estilo
index.html, agregue lo <head>siguiente a la etiqueta :
<link rel="stylesheet" type="text/css" href="style.css"
Aquí procedemos de la suposición de que el archivo de estilo tiene un nombre
style.cssy está almacenado en la misma carpeta que index.html.
Aquí está la imagen que mostraremos en la página.
Una tarea
Necesitamos que se muestre una imagen en la página. Al hacerlo, queremos manipular dinámicamente esta imagen. Es decir, necesitamos la capacidad de cambiar la ruta a la imagen almacenada en la instancia de Vue e inmediatamente ver los resultados de estos cambios en la página. Dado que es el atributo del
srcelemento el <img>responsable de la imagen que mostrará el elemento, debemos vincular algunos datos a este atributo. Esto nos permitirá cambiar dinámicamente la imagen en función de los datos almacenados en la instancia de Vue.
Un término importante: enlace de datos
Cuando hablamos de enlace de datos en Vue, el punto es que el lugar en la plantilla en el que se usan o muestran los datos está directamente "conectado" o "vinculado" a la fuente de datos, es decir, al objeto correspondiente almacenado en la instancia Vue.
En otras palabras, la entidad de origen de datos está asociada con la entidad en la que se utilizan estos datos, con el sumidero de datos. En nuestro caso, la fuente de datos es una instancia de Vue y el receptor es un atributo del
srcelemento <img>.
La solucion del problema
Para vincular un valor de propiedad
imagede un objeto de datos a una propiedad de srcetiqueta <img>, usaremos la directiva Vue v-bind. Reescribamos el código de etiqueta <img>del archivo index.html:
<img v-bind:src="image" />
Cuando Vue, mientras procesa una página, ve tal construcción, el marco la reemplaza con el siguiente código HTML:
<img src="./assets/vmSocks-green.jpg" />
Si todo se hace correctamente, se mostrará una imagen en la página.
La imagen de los calcetines verdes se muestra en la página.
Y si cambia el valor de la
imagepropiedaddelobjetodata, el valor del atributo cambiará en consecuenciasrc, lo que conducirá a la visualización de una nueva imagen en la página.
Digamos que queremos reemplazar los calcetines verdes con los azules. Para hacer esto, dado que la ruta al archivo con la nueva imagen se ve
./assets/vmSocks-blue.jpg(el archivo de imagen se puede encontrar aquí ), es suficiente para traer el código de descripción de propiedadimageen el objetodataa este formulario:
image: "./assets/vmSocks-blue.jpg"
Esto hará que la imagen de los calcetines azules aparezca en la página.
La imagen de los calcetines azules se muestra en la página.
Casos de uso adicionales para v-bind
La directiva
v-bindse puede usar no solo con un atributo src. También puede ayudarnos a ajustar dinámicamente el atributo de imagen alt.
Agreguemos una
datanueva propiedad al objeto con opciones altText:
altText: "A pair of socks"
Atemos los datos correspondientes al atributo
alt, llevando el código del elemento <img>a este formulario:
<img v-bind:src="image" v-bind:alt="altText" />
Aquí, como en el caso del atributo
src, se utiliza la construcción, que consta de v-binddos puntos y el nombre del atributo ( alt).
Ahora, si las propiedades de la instancia de Vue cambian
imageo altText, los <img>datos actualizados aparecerán en los atributos del elemento correspondiente . Esto no romperá el enlace entre los atributos del elemento y los datos almacenados en la instancia de Vue.
Esta técnica se usa constantemente cuando se desarrollan aplicaciones Vue. Debido a esto, hay una versión abreviada del registro de construcción
v-bind:. Parece que :. Si utiliza esta técnica al escribir código de etiqueta <img>, obtendrá lo siguiente:
<img :src="image" />
Es simple y conveniente. Esta técnica mejora la limpieza del código.
Taller
Agregue un enlace (elemento
<a>) con texto a la página More products like this. En el objeto, datacree una propiedad que linkcontenga el enlace https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Vincula, usando una directiva v-bind, una propiedad linka un atributo de un hrefelemento <a>.
→ Aquí hay una plantilla que puede usar para resolver este problema.
→ Aquí está la solución al problema.
Salir
Esto es lo que aprendimos hoy:
- Los datos almacenados en la instancia de Vue pueden estar vinculados a atributos HTML.
- La directiva se utiliza para vincular datos a atributos
v-bind. La abreviatura de esta directiva es dos puntos (:). - Un nombre de atributo que sigue a dos puntos indica el atributo al que están vinculados los datos.
- Como el valor del atributo especificado entre comillas, se utiliza el nombre de la clave, mediante el cual puede encontrar los datos conectados al atributo.
Si está tomando este curso, le pedimos que nos cuente sobre el entorno que utiliza para hacer su tarea.
→ Parte 1: Creación de instancias de Vue
→ Parte 2: Enlace de atributos en Vue
