Directivas en Vue js

Las directivas en VueJs son atributos especiales que permiten enlazar de manera
reactiva algun valor del data con el template.

Cuando los valores cambien las directivas son las encargadas de llevar dichos cambios al DOM.

Vue Js incorpora muchas directivas por defecto:

v-if

Agrega o elimina un elemento del DOM.

1
2
3
4
5
6
7
8
9
10
11
12
<div v-if="showAlert">
  <p>Hello, you must readme me!</p>
</div>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      showAlert: true
    }
  });
</script>

En el ejemplo anterior tenemos un div que se va a mostrar cada vez que la variable showAlert evalúe a true y se eliminará del DOM si es que la evaluación es false.

v-show

Esta directiva funciona similar a v-if, pero con la diferencia de que en lugar de agregar/eliminar el elemento del DOM agregará la propiedad css display con el valor none para ocultarlo. En caso el resultado de la expresión sea falsa eliminará la propiedad.

1
2
3
4
5
6
7
8
9
10
11
12
<div v-show="showAlert">
  <p>Hola, leemé por favor!</p>
</div>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      showAlert: true
    }
  });
</script>

v-html

Esta directiva permite insertar html en nuestro template. Es decir que actualizará la propiedad innerHTML del elemento.

1
2
3
4
5
6
7
8
9
10
<div v-html="myCustomHtml"></div>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      myCustomHtml: "<p>Hola <strong>Mundo usando v-html!</strong></p>"
    }
  });
</script>

v-text

Similar a v-html, pero actualiza la propiedad textContent del elemento

1
2
3
4
5
6
7
8
9
10
<p v-text="myText"></p>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      myText: "Hola Mundo usando v-text!"
    }
  });
</script>

v-bind

Permite unir algún valor de nuestro data a un atributo.

1
2
3
4
5
6
7
8
9
10
<img v-bind:src="myPhotoUrl" alt="Nicolas Cage Photo" />

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      myPhotoUrl: "https://www.placecage.com/200/300"
    }
  });
</script>

Sirve para cualquier atributo, por ejemplo style

1
2
3
4
5
6
7
8
9
10
<p v-bind:style="myStyle">Actualiza la pagina para verme de otro color</p>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      myStyle: Math.random() * 2 > 1 ? { color: "red" } : { color: "green" }
    }
  });
</script>

v-pre

Le indica a Vue que no debe realizar ningún proceso de compilación en este elemento y cualquiera de sus hijos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div v-pre>
  <p v-if="false">Las directivas aca no tienen poder</p>
  <div>
    <p>{{preValue}}</p>
  </div>
</div>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      preValue: "Este mensaje no se verá en el template"
    }
  });
</script>

v-once

Renderiza el elemento solo una vez. Si la expresión asociada al elemento cambia no se verá reflejada en el template.

1
2
3
4
5
6
7
8
9
10
<p v-once>{{onceMessage}}</p>

<script>
  const app = new Vue({
    el: "#my-app",
    data: {
      onceMessage: "Este mensaje nunca cambiará"
    }
  });
</script>