Sintaxis de Template ​

Vue utiliza una sintaxis de template basada en HTML que te permite enlazar declarativamente el DOM renderizado con los datos de la instancia del componente subyacente. Todas los templates de Vue son HTML sintácticamente válido que puede ser analizado por navegadores y analizadores HTML que cumplen con las especificaciones.

Internamente, Vue compila los templates en código JavaScript altamente optimizado. Combinado con el sistema de reactividad, Vue puede determinar inteligentemente el número mínimo de componentes a re-renderizar y aplicar la cantidad mínima de manipulaciones del DOM cuando el estado de la aplicación cambia.

Si estás familiarizado con los conceptos del Virtual DOM y prefieres el poder puro de JavaScript, también puedes escribir funciones de renderizado directamente en lugar de templates, con soporte opcional de JSX. Sin embargo, ten en cuenta que no disfrutan del mismo nivel de optimizaciones en tiempo de compilación que los templates.

Interpolación de Texto ​

La forma más básica de enlace de datos es la interpolación de texto usando la sintaxis de "bigotes" (doble llave):

<span>Mensaje: {{ msg }}</span>

La etiqueta de bigotes será reemplazada por el valor de la propiedad msg de la instancia del componente correspondiente. También se actualizará cada vez que la propiedad msg cambie.

HTML Crudo ​

Los dobles bigotes interpretan los datos como texto plano, no como HTML. Para generar HTML real, necesitarás usar la directiva v-html:

<p>Usando interpolación de texto: {{ rawHtml }}</p>
<p>Usando la directiva v-html: <span v-html="rawHtml"></span></p>

Aquí nos encontramos con algo nuevo. El atributo v-html que estás viendo se llama directiva. Las directivas tienen el prefijo v- para indicar que son atributos especiales proporcionados por Vue, y como habrás adivinado, aplican un comportamiento reactivo especial al DOM renderizado. Aquí, básicamente estamos diciendo "mantén el HTML interno de este elemento actualizado con la propiedad rawHtml de la instancia activa actual".

El contenido del span será reemplazado por el valor de la propiedad rawHtml, interpretado como HTML plano; los enlaces de datos se ignoran. Ten en cuenta que no puedes usar v-html para componer parciales de template, porque Vue no es un motor de templates basado en cadenas. En su lugar, los componentes son preferidos como la unidad fundamental para la reutilización y composición de la interfaz de usuario.

Enlaces de Atributos ​

Los bigotes no se pueden usar dentro de los atributos HTML. En su lugar, usa una directiva v-bind:

<div v-bind:id="dynamicId"></div>

La directiva v-bind le indica a Vue que mantenga el atributo id del elemento sincronizado con la propiedad dynamicId del componente. Si el valor enlazado es null o undefined, entonces el atributo será eliminado del elemento renderizado.

Abreviación ​

Debido a que v-bind se usa con tanta frecuencia, tiene una sintaxis abreviada dedicada:

<div :id="dynamicId"></div>

Los atributos que comienzan con : pueden parecer un poco diferentes del HTML normal, pero de hecho es un carácter válido para nombres de atributos y todos los navegadores compatibles con Vue pueden analizarlo correctamente. Además, no aparecen en el marcado renderizado final. La sintaxis abreviada es opcional, pero es probable que la aprecies cuando aprendas más sobre su uso más adelante.

Para el resto de la guía, usaremos la sintaxis abreviada en los ejemplos de código, ya que es el uso más común para los desarrolladores de Vue.

Abreviación con el Mismo Nombre ​

• Solo compatible con 3.4+

Si el atributo tiene el mismo nombre que el nombre de la variable del valor JavaScript que se está enlazando, la sintaxis se puede acortar aún más para omitir el valor del atributo:

<!-- lo mismo que :id="id" -->
<div :id></div>

<!-- esto también funciona -->
<div v-bind:id></div>

Esto es similar a la sintaxis abreviada de propiedades al declarar objetos en JavaScript. Ten en cuenta que esta es una característica que solo está disponible en Vue 3.4 y superiores.

Atributos Booleanos ​

Los atributos booleanos son atributos que pueden indicar valores verdaderos/falsos por su presencia en un elemento. Por ejemplo, disabled es uno de los atributos booleanos más utilizados.

v-bind funciona un poco diferente en este caso:

<button :disabled="isButtonDisabled">Botón</button>

El atributo disabled se incluirá si isButtonDisabled tiene un valor verdadero (truthy). También se incluirá si el valor es una cadena vacía, manteniendo la consistencia con <button disabled="">. Para otros valores falsos (falsy), el atributo se omitirá.

Enlace Dinámico de Múltiples Atributos ​

Si tienes un objeto JavaScript que representa múltiples atributos y se ve así:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

Puedes enlazarlos a un solo elemento usando v-bind sin un argumento:

<div v-bind="objectOfAttrs"></div>

Uso de Expresiones JavaScript ​

Hasta ahora solo hemos estado enlazando a claves de propiedades simples en nuestras templates. Pero Vue realmente admite todo el poder de las expresiones JavaScript dentro de todos los enlaces de datos:

{{ number + 1 }}

{{ ok ? 'SÍ' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

Estas expresiones se evaluarán como JavaScript en el ámbito de datos de la instancia del componente actual.

En los templates de Vue, las expresiones JavaScript se pueden usar en las siguientes posiciones:

• Dentro de las interpolaciones de texto (bigotes)
• En el valor del atributo de cualquier directiva de Vue (atributos especiales que comienzan con v-)

Solo Expresiones ​

Cada enlace solo puede contener una única expresión. Una expresión es un fragmento de código que se puede evaluar a un valor. Una comprobación simple es si se puede usar después de return.

Por lo tanto, lo siguiente NO funcionará:

<!-- esta es una declaración, no una expresión: -->
{{ var a = 1 }}

<!-- el control de flujo tampoco funcionará, usa expresiones ternarias -->
{{ if (ok) { return message } }}

Llamada a Funciones ​

Es posible llamar a un método expuesto por el componente dentro de una expresión de enlace:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

Acceso Restringido a Globales ​

Las expresiones de template están en un entorno aislado (sandboxed) y solo tienen acceso a una lista restringida de globales. La lista expone globales integrados comúnmente utilizados como Math y Date.

Los globales no incluidos explícitamente en la lista, por ejemplo, las propiedades adjuntas por el usuario en window, no serán accesibles en las expresiones de template. Sin embargo, puedes definir explícitamente globales adicionales para todas las expresiones de Vue agregándolos a app.config.globalProperties.

Directivas ​

Las directivas son atributos especiales con el prefijo v-. Vue proporciona una serie de directivas integradas, incluidas v-html y v-bind que hemos presentado anteriormente.

Se espera que los valores de los atributos de las directivas sean expresiones JavaScript únicas (con la excepción de v-for, v-on y v-slot, que se discutirán en sus secciones respectivas más adelante). El trabajo de una directiva es aplicar actualizaciones de forma reactiva al DOM cuando cambia el valor de su expresión. Tomemos v-if como ejemplo:

<p v-if="seen">Ahora me ves</p>

Aquí, la directiva v-if eliminaría o insertaría el elemento <p> basándose en la veracidad del valor de la expresión seen.

Argumentos ​

Algunas directivas pueden tomar un "argumento", denotado por dos puntos después del nombre de la directiva. Por ejemplo, la directiva v-bind se utiliza para actualizar reactivamente un atributo HTML:

<a v-bind:href="url"> ... </a>

<!-- abreviación -->
<a :href="url"> ... </a>

Aquí, href es el argumento, que le dice a la directiva v-bind que enlace el atributo href del elemento al valor de la expresión url. En la abreviatura, todo antes del argumento (es decir, v-bind:) se condensa en un solo carácter, :.

Otro ejemplo es la directiva v-on, que escucha eventos del DOM:

<a v-on:click="doSomething"> ... </a>

<!-- abreviación -->
<a @click="doSomething"> ... </a>

Aquí, el argumento es el nombre del evento a escuchar: click. v-on tiene una abreviatura correspondiente, a saber, el carácter @. También hablaremos sobre el manejo de eventos con más detalle.

Argumentos Dinámicos ​

También es posible usar una expresión JavaScript en un argumento de directiva envolviéndola con corchetes:

<!--
Ten en cuenta que existen algunas restricciones para la expresión del argumento, tal y como se explica en las secciones
"Restricciones Dinámicas del Valor del Argumento" y "Restricciones Dinámicas de la Sintaxis del Argumento" más adelante.
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- abreviación -->
<a :[attributeName]="url"> ... </a>

Aquí, attributeName se evaluará dinámicamente como una expresión JavaScript, y su valor evaluado se utilizará como el valor final para el argumento. Por ejemplo, si la instancia de tu componente tiene una propiedad de datos attributeName cuyo valor es "href", entonces este enlace será equivalente a v-bind:href.

De manera similar, puedes usar argumentos dinámicos para enlazar un manejador a un nombre de evento dinámico:

<a v-on:[eventName]="doSomething"> ... </a>

<!-- abreviación -->
<a @[eventName]="doSomething"> ... </a>

En este ejemplo, cuando el valor de eventName es "focus", v-on:[eventName] será equivalente a v-on:focus.

Restricciones Dinámicas del Valor del Argumento ​

Se espera que los argumentos dinámicos se evalúen a una cadena, con la excepción de null. El valor especial null se puede usar para eliminar explícitamente el enlace. Cualquier otro valor que no sea una cadena disparará una advertencia.

Restricciones Dinámicas de la Sintaxis del Argumento ​

Las expresiones de argumento dinámico tienen algunas restricciones de sintaxis porque ciertos caracteres, como espacios y comillas, son inválidos dentro de los nombres de atributos HTML. Por ejemplo, lo siguiente no es válido:

<!-- Esto activará una advertencia del compilador. -->
<a :['foo' + bar]="value"> ... </a>

Si necesitas pasar un argumento dinámico complejo, probablemente sea mejor usar una propiedad computada, que cubriremos en breve.

Al usar templates en el DOM (templates escritas directamente en un archivo HTML), también debes evitar nombrar claves con caracteres en mayúscula, ya que los navegadores forzarán los nombres de los atributos a minúsculas:

<a :[someAttr]="value"> ... </a>

Lo anterior se convertirá en :[someattr] en los templates en el DOM. Si tu componente tiene una propiedad someAttr en lugar de someattr, tu código no funcionará. Los templates dentro de los Componentes de Archivo Único (SFC) no están sujetas a esta restricción.

Modificadores ​

Los modificadores son sufijos especiales denotados por un punto, que indican que una directiva debe enlazarse de alguna manera especial. Por ejemplo, el modificador .prevent le dice a la directiva v-on que llame a event.preventDefault() en el evento disparado:

<form @submit.prevent="onSubmit">...</form>

Verás otros ejemplos de modificadores más adelante, para v-on y para v-model, cuando exploremos esas características.

Y finalmente, aquí está la sintaxis completa de la directiva visualizada: