Curso de VUE 3 – Plantillas y bindeo de datos

Seguimos con el curso de Vue 3, y en esta nueva entrada del blog veremos que son los templates (plantillas), el bindeo de datos y algunas directivas.

¡Comencemos!

Sintaxis de plantillas

Las plantillas en Vue.js se escriben usando HTML estándar y añadiendo una sintaxis especial que nos proporciona Vue.

Si conoces o has trabajado con algún otro framework o librería como Angular, React o Svelte, esta sintaxis te resultara familiar.

En Vue cuando queremos mostrar datos en el template o evaluar expresiones, podemos usar las llaves dobles: {{ dato o expresión }}

<script setup>
  import { ref } from 'vue';
  const message = ref('Hello World!!!');
</script>

<template>
  <h1>{{ message }}</h1>
</template>

En este ejemplo, la expresión {{ message }} se reemplaza por el valor de la variable message.

También podemos realizar evaluaciones de código en el mismo template.

<script setup>
  import { ref } from 'vue';
  const message = ref('Hello World!!!');
</script>
<template>
  <h1>{{ message }}</h1>
  <p>Suma 10 * 20 = {{ 10 * 20 }}</p>
</template>

Existen otras formas de mostrar datos en un template y es mediante el uso de directivas, pero eso lo veremos en breve.

Enlaces de datos reactivos

De forma general Vue nos proporciona un sistema de bindeo de datos reactivo que nos permite conectar el estado la aplicación al interfaz de usuario.

Cuando el estado de la aplicación cambia, la interfaz de usuario se actualiza automáticamente para reflejar los cambios.

En Vue 3 y gracias a la Composition API podemos declarar el estado reactivo mediante el uso de funciones reactvie y ref.

<script setup>
  import { ref } from 'vue';
  const name = ref('');
</script>
<template>
  <div>
    <div>
      <input type="text" v-model="name" placeholder="Name" />
    </div>
    <div>
      Name: <label>{{ name }}</label>
    </div>
  </div>
</template>

Directiva v-bind y v-on

La directiva v-bind se utiliza para enlazar una propiedad de un componente a un atributo HTML.

La sintaxis de la directiva v-bind es v-bind:atributo="valor" o podemos usar su shorthand (forma abreviada) de la siguiente forma :atributo="valor".

<script setup>
  import { ref } from 'vue';
  const imageURL = ref('https://www.arsys.es/blog/file/uploads/2020/04/01-vuejs.jpg');
</script>
<template>
  <div>
    <img :src="imageURL" />
    <img v-bind:src="imageURL" />
  </div>
</template>
<style>
  img {
    width: 200px;
    height: auto;
    border: 1px solid #cccccc;
  }
</style>

La directiva v-on se utiliza para enlazar un método de un componente a un evento HTML.

La sintaxis de la directiva v-on es v-on:evento="método" o podemos usar su shorthand (forma abreviada) de la siguiente forma @evento="metodo".

<script setup>
  import { ref } from 'vue';
  const text = ref('');
  const reverseText = () => {
    text.value = text.value.split('').reverse().join('');
  };
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text"/>
    <button v-on:click="reverseText">Click to reverse text</button>
    <button @click="reverseText">Click to reverse text</button>
  </div>
  <div>
    Reverse text: {{ text }}
  </div>
</template>

Directiva v-text y v-html

Estas directivas se utilizan para actualizar el contenido de un elemento HTML de manera reactiva.

Cada una tiene un propósito específico y se usa en diferentes casos según el tipo de contenido que se necesita renderizar.

La directiva v-text se usa para actualizar el contenido de texto de un elemento.

Es similar a usar interpolación con dobles llaves {{}}, pero v-text evita el parpadeo (flashing) del contenido cuando se renderiza inicialmente.

<script setup>
  import { ref } from 'vue';
  const text = ref('');
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text"/>
    <p v-text="text"></p>
  </div>
</template>

La directiva v-html se usa para insertar contenido HTML sin escaparlo, es decir, el contenido se renderiza como HTML real.

Esto es útil cuando necesitas renderizar contenido HTML dinámico proveniente de una fuente confiable.

<script setup>
  import { ref } from 'vue';
  const text = ref('');
</script>
<template>
  <div>
    <input type="text" v-model="text" placeholder="Write a text" />
    <p v-html="text"></p>
  </div>
</template>

Directiva v-if, v-show y v-for

La directiva v-if se usa para mostrar u ocultar un elemento HTML en función de una condición.

Debemos tener en cuenta que la directiva v-if en base a la condición dada, el elemento no se renderiza en el DOM.

<script setup>
  import { ref } from 'vue';
  const show = ref(false);
  const toggleTitle = () => {
    show.value = !show.value;
  };
</script>
<template>
  <div>
    <p v-if="show">Title</p>    
    <p>
      <button @click="toggleTitle">Toggle</button>
    </p>
  </div>
</template>

La directiva v-show funciona exactamente igual que v-if, pero en lugar de añadir o eliminar el elemento del DOM, simplemente ajusta la propiedad CSS display del elemento.

<script setup>
  import { ref } from 'vue';
  const show = ref(false);
  const toggleTitle = () => {
    show.value = !show.value;
  };
</script>
<template>
  <div>
    <p v-show="show">Title</p>    
    <p>
      <button @click="toggleTitle">Toggle</button>
    </p>
  </div>
</template>

La directiva v-for se utiliza para renderizar una lista de elementos HTML en función de un array de datos, y sus sintaxis es v-for="(item, index) in array"

<script setup>
  import { reactive } from 'vue';
const dataTable = reactive([
    { id: 1, name: 'John Doe', age: 30, gender: 'Male', city: 'New York' },
    { id: 2, name: 'Jane Doe', age: 25, gender: 'Female', city: 'Los Angeles' },
    { id: 3, name: 'Peter Smith', age: 40, gender: 'Male', city: 'Chicago' },
    { id: 4, name: 'Mary Smith', age: 35, gender: 'Female', city: 'Houston' },
    { id: 5, name: 'David Jones', age: 50, gender: 'Male', city: 'Dallas' }
  ]);

</script>
<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in dataTable" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
        <td>{{ row.city }}</td>
      </tr>
    </tbody>
  </table>
</template>
<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
  body {
    font-family: 'Roboto', sans-serif;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>

En este ejemplo usamos la directiva v-for para mostrar las filas de una tabla en función del array dataTable, usando la directiva :key  para proporcionar una clave única a cada elemento de la tabla.