02.md

🎬 Directivas

Las directivas son una característica muy importante dentro de Vue. Junto con las expresiones, son quienes nos permiten manipular, interactuar y modificar el DOM. Este concepto (como muchos otros) viene del mundo Angular. Podemos definir entonces a una directiva como atributos personalizados y dinámicos para maniuplar elementos HTML.

Estas son algunas de las directivas nativas de Vue:

1. v-if y v-else ➡️ Agrega o elimina elementos del DOM en función de un resultado booleano
2. v-show ➡️ funciona igual a v-if pero en lugar de eliminar o agregar el elemento, lo hace visible o invisible.
3. v-for ➡️ Iterar y representa en HTML una colección de elementos (Array) o un objeto.
4. v-bind ➡️ Permite que cualquier atributo HTML como href, src o class recibe propiedades para generar valores dinámicos.

v-if, v-else y v-show

1. Partiendo del ejemplo anterior vamos agregar una propiedad show a nuestro vm, que nos permita agregar o eliminar el elemento del DOM. Recuerden que las propiedades siempre deben ser parte del objeto que retorna la función data.

const vm = {
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!',
      show: true
    }
  }
}

const app = new Vue(vm)

2. Una vez que hayamos definido la propiedad podemos agregar las directivas v-if y v-else a nuestro HTML.

<div id="app">
  <p v-if="show">
    {{ message }}
  </p>
  <p v-else="">
    El texto esta oculto
  </p>
</div>

Acabamos de insertar nuestra primera directiva, en base al valor de la propiedad show vamos a poder condicionar nuestro HTML. Si show === true (en realidad si es truthy) se visualizara 'Hello Vue!', en caso contrario veremos 'El texto esta oculto'. Prueben cambiar el valor de show para corroborar el funcionamiento.

Al igual que en JS, el uso de v-else cuando usamos un v-if es opcional. Podemos decidir si usarlo o no.

3. Probemos también con agregar otro elemento HTML usando la directiva v-show el cual también va estar enlazado al valor de la propiedad show de nuestro vm.

<div id="app">
  <p v-if="show">
    {{ message }}
  </p>
  <p v-else="">
    El texto esta oculto
  </p>

  <p v-show="show">
    {{ message }}
  </p>
</div>

Ahora el texto 'Hello Vue!' se visualizara por duplicado cada vez que show sea verdadero. Si inspeccionamos el DOM usando las Dev Tools del browser, podemos observar que cuando show === true ambos elementos permanecen en el DOM. Pero cuando show === false, el elemento que usa v-if se elimina, mientras que el que usa v-show sigue existiendo pero permanece oculto usando la propiedad display de CSS.

v-bind

El uso de esta directiva es muy común ya que nos permite darle dinamismo a cualquier atributo HTML en tiempo real. Es decir que usando v-bind podemos modificar desde el src de un tag <img> hasta el href de tag <a>.

1. Agregamos una nueva propiedad al objeto de la función data llamada url y le definimos un valor en formato string con la url que mas nos guste.

const vm = {
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!',
      show: true,

      items: [
        { text: 'A' },
        { text: 'B' },
        { text: 'C' },
      ],

      url: 'https://google.com'
    }
  }
}

const app = new Vue(vm)

2. Añadimos un nuevo elemento <a> a nuestro HTML al cual lo vamos a enlazar con la variable url de nuestro vm usando esta sintaxis: v-bind:href="url".

<div id="app">
  <p v-if="show">
    {{ message }}
  </p>
  <p v-else="">
    El texto esta oculto
  </p>

  <p v-show="show">
    {{ message }}
  </p>

  <ul>
    <li v-for="i in items">
      {{ i.text }}
    </li>
  </ul>

  <a v-bind:href="url">Link Dinámico</a>
</div>

Como pueden ver la manera de utilizar la directiva es con el formato v-bind:[nombre del atributo]. De ahora en mas cada vez que el valor de la propiedad url se modifique también se modificara el valor del atributo href de nuestro link. Esta directiva puede escribirse de manera mas sencilla usando un shortcut: :href="url". Por lo cual cada vez que en Vue vean : que preceden un atributo HTML, recuerden que equivale a escribir la directiva v-bind.

v-for

1. Por ultimo vamos a ver el compartimiento de v-for. Nos permite representar una colección de elementos en nuestro HTML. Creamos un Array con el nombre items en la función data de nuestro vm y vamos a llenar este array con algunos objetos.

const vm = {
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!',
      show: true,

      items: [
        { text: 'A' },
        { text: 'B' },
        { text: 'C' },
      ]
    }
  }
}

const app = new Vue(vm)

2. Ahora nos falta agregar el HTML necesario que junto a la directiva v-for nos permita visualizar cada elemento dentro de la colección de items.

<div id="app">
  <p v-if="show">
    {{ message }}
  </p>
  <p v-else="">
    El texto esta oculto
  </p>

  <p v-show="show">
    {{ message }}
  </p>

  <ul>
    <li v-for="i in items" v-bind:key="i">
      {{ i.text }}
    </li>
  </ul>
</div>

Agregamos tambien la directiva v-bind con la propiedad key. Esta propiedad es requerida por vue cuando utilizamos colecciones y la directiva v-for ya que le permite identificar univocamente cada elemento y evitar problemas en el futuro. Podes encontar mas informacion en este link.

Si todo salió bien, vas a ver en pantalla una lista que contiene 3 elementos <li>. Lo que esta pasando entonces es que a través de la propiedad i podemos representar cada uno de los elementos de items y definir la estructura HTML con la cual queremos visualizarlos. Como nuestros items son objetos usamos la sintaxis nativa de JS para acceder a sus propiedades {{ i.text }}.

👌 Usando la directiva v-for, tambien podes al indice que le corresponde a cada elemento con la siguiente sintaxis: v-for="(item, index) in items". De esta forma, el primer parametro hace referencia al elemento y el segundo al indice que le corresponde al mismo. 👌 v-for tambien puede ser utilizado para representar las propiedades de un objeto. Podes ver este ejemplo de la documentación.

---

👉 Aclaraciones

En JS tenemos valores truthy y falsy. A grandes rasgos esto implica que cualquier valor (independientemente del tipo de dato) puede ser evaluado de forma booleana. Los valores falsy son todos aquellos que en el caso de ser evaluados en expresiones booleanas devuelven false. Estos valores son: false, '', 0, null y undefined. Esto quiere decir que todos los otros valores (incluso objetos y arreglos vacíos) retornan true.

En las expresiones podemos escribir cualquier tipo de código JS valido. En realidad no cualquiera. No podemos usar if, else, for, while pero si podemos usar ternary expressions, concatenar cadenas de texto, operar valores aritméticamente y acceder a métodos y propiedades de las variables. Estos son algunos ejemplos de expresiones validas:

{{ 1 * 100 }}
{{ str1 + ' ' + str2 }}
{{ JSON.stringify(obj) }}
{{ str.replace(/ /g, '-') }}
{{ arr.join('-') }}

Si tenes ganas, podes experimentar en codepen y jugar con diferentes alternativas de codigo JavaScript para probar en las expresiones.

📝 Solución

⏪ ⏩