Uso de la sintaxis de plantilla Vue para crear una galería de fotos

Vue se utiliza mejor con sus funciones de creación de plantillas. Resulta muy intuitivo crear interfaces de usuario sofisticadas.

Tómalodirectivas, por ejemplo, que se refiere a atributos de etiqueta con el v-prefijo.

Podrías tener una variable urlen tu instancia de Vue que tu etiqueta de anclaje use como su href. Se vería así:

a v-bind:href="url"/a

Probémoslo con la otra directiva que utilizaremos mucho:

a v-on:click="myFunction"/a

Así es como llamaríamos a una de las funciones de nuestro componente al hacer clic en el enlace.

Los argumentos dinámicos llevan sus directivas a un nuevo nivel. Considere lo siguiente:

a v-bind:[attributeName]="url".../a

attributeNamees en sí misma una expresión de JavaScript como url, interpretada como tal debido a los corchetes que la rodean.

a v-on:[event]="myFunction"/asignificaría que la variable del evento podría ser "hover"o "click"o cualquier otro atributo utilizado con v-on.

Repasemos una cosa más.

Las directivas v-ony v-bindson tan comunes que tenemos atajos para escribirlas en Vue; :y @.

Entonces, una imgetiqueta con un atributo dinámico podría ser img :[classOrId]="value" @click="display"donde displayes una función, valuees una variable de cadena y classOrIdtambién es una variable de cadena.

Para ampliar esto, vamos a crear una galería de fotos con algunas de estas nuevas y sofisticadas sintaxis de plantillas. ¡Prepárate!

Configuración de la aplicación

Si aún no tienes instalado Vue CLI, comienza ejecutando cualquiera de estos comandos en tu terminal, dependiendo de si prefieres usar npm o Yarn:

$ npm install -g @vue/cli

o

$ yarn global add @vue/cli

Ahora podrás ejecutar el vuecomando desde la línea de comandos. Vamos a crear una aplicación Vue llamadacáscara de caimán

$ vue create alligator-zest$ cd alligator-zest$ npm run build$ npm run serve

A continuación, vamos a cambiar HelloWorld.vuea PhotoGallery.vue. App.vuedebería verse así:

Aplicación.vue

template  div    PhotoGallery/  /div/templatescriptimport PhotoGallery from './components/PhotoGallery.vue'export default {  name: 'App',  components: {    PhotoGallery  }}/scriptstyle#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}/style

PhotoGallery.vueAquí es donde vamos a ponernos elegantes y al mismo tiempo mantener las cosas simples.

Construyendo nuestra galería

Supongamos que tenemos 5 archivos de fotos en la assets/photoscarpeta con el nombre 1.jpeg. 5.jpegUtilice las imágenes que desee.

Galería de fotos.vue

template  div    ul      li v-for="n in 5" :key="n"        img          :src="require('@/assets/photos/' + n + '.jpeg')"              /li    /ul  /div/templatescriptexport default {  name: 'PhotoGallery'}/scriptstyle scopedul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}.gallery {  display: flex;  justify-content: space-around;}img {  width: 20%;}/style

El @símbolo es un alias de webpack que apunta a la srccarpeta.

Ten en cuenta tanto el display: flex"on" "gallery"como el "in" v-forde la lietiqueta. Deberías poder ver la aplicación en tu navegador en localhost:8080.

Actualicemos este código para que cuando hagamos clic en una foto ésta se amplíe.

Galería de fotos.vue

template  div    ul      li v-for="n in 5" :key="n"        img             @click="highlight"          :src="require('@/assets/photos/beijing/' + n + '.jpeg')"              /li    /ul  /div/templatescriptexport default {  name: 'PhotoGallery'},methods: {  highlight() {    event.target.id = "theater";    let eventIterator = event.target.parentNode;    while (eventIterator.previousElementSibling != null) {      eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";      eventIterator = eventIterator.previousElementSibling;    }    eventIterator = event.target.parentNode;    while (eventIterator.nextElementSibling != null) {      eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";      eventIterator = eventIterator.nextElementSibling;    }  }}/scriptstyle scopedul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}.gallery {  display: flex;  justify-content: space-around;}img {  width: 20%;}#theater {  width: 40%;}/style

Agregamos un v-on:clicka cada imagen que activa el highlight()método. Este método hace que la imagen en la que se hace clic se agrande y garantiza que las demás tengan el tamaño de una miniatura.

Establece el ID de la imagen en la que se hizo clic en "theater", que tiene un ancho mayor. Luego, obtiene los nodos hermanos del nodo padre de la imagen, el li con el v-for en él. Entra en todas estas etiquetas li y establece el ID de su etiqueta img respectiva en una cadena nula para asegurarse de que solo una img tenga el ID de "theater" en un momento dado.

Esto es genial, pero aún no es lo que vemos en la web. ¿Cómo podemos lograr que la imagen ampliada se muestre en una pantalla grande, por ejemplo, debajo de las 5 miniaturas? El resultado final sería una serie de miniaturas con la imagen seleccionada ampliada a un tamaño real de cine justo debajo. Suena bien, ¿verdad?

Vamos a agregar lo siguiente:

div  img    :src="this.theatrical"  /div

data() {  return {    theatrical: ""  }},methods: {  highlight() {    event.target.id = "theater";    this.theatrical = event.target.src;

Y por último, añade lo siguiente a tu CSS.

#frame img {  width: 80%;}

¡Compruébalo en tu navegador!

El marco grande se llena con la foto en la que hiciste clic, ya que su srcatributo se establece cuando haces clic. ¡Ahora tienes una bonita vista de galería de tus fotos!

Todo ello con un uso ingenioso del sistema de reactividad de Vue, propiedades de datos y sintaxis de plantillas.