Vue.js

Apariencia

En esta página

Directivas Integradas ​

v-text ​

Actualiza el contenido de texto del elemento.

  • Espera: string

  • Detalles

    v-text funciona estableciendo la propiedad textContent del elemento, por lo que sobrescribirá cualquier contenido existente dentro del elemento. Si necesitas actualizar solo una parte del textContent, debes utilizar interpolaciones mustache en su lugar (es decir, <span>Mantén esto pero actualiza {{dynamicPortion}}</span>).

  • Ejemplo

    template
    <span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

  • Ver también Sintaxis de Template - Interpolación de Texto

v-html ​

Actualiza el innerHTML del elemento.

  • Espera: string

  • Detalles

    El contenido de v-html se inserta como HTML plano - la sintaxis de template de Vue no será procesada. Si te encuentras intentando componer templates usando v-html, intenta repensar la solución utilizando componentes en su lugar.

    Nota de Seguridad

    Renderizar dinámicamente HTML arbitrario en tu sitio web puede ser muy peligroso porque puede conducir fácilmente a ataques XSS. Usa v-html solo en contenido de confianza y nunca en contenido proporcionado por el usuario.

    En Componentes de Archivo Único, los estilos scoped no se aplicarán al contenido dentro de v-html, porque ese HTML no es procesado por el compilador de templates de Vue. Si deseas aplicar estilos CSS scoped al contenido de v-html, puedes usar módulos CSS o un elemento <style> global adicional con una estrategia de alcance manual como BEM.

  • Ejemplo

    template
    <div v-html="html"></div>

  • Ver también Sintaxis de Template - HTML Crudo

v-show ​

Alterna la visibilidad del elemento basándose en el valor de verdad de la expresión.

  • Espera: any

  • Detalles

    v-show funciona estableciendo la propiedad CSS display mediante estilos en línea, e intentará respetar el valor display inicial cuando el elemento sea visible. También dispara transiciones cuando su condición cambia.

  • Ver también Renderizado Condicional - v-show

v-if ​

Renderiza condicionalmente un elemento o un fragmento de template basándose en el valor de verdad de la expresión.

  • Espera: any

  • Detalles

    Cuando un elemento con v-if es alternado, el elemento y sus directivas / componentes contenidos son destruidos y reconstruidos. Si la condición inicial es falsa, el contenido interno no será renderizado en absoluto.

    Puede usarse en <template> para denotar un bloque condicional que contiene solo texto o múltiples elementos.

    Esta directiva dispara transiciones cuando su condición cambia.

    Cuando se usan juntas, v-if tiene una prioridad más alta que v-for. No recomendamos usar estas dos directivas juntas en un mismo elemento — consulta la guía de renderizado de listas para más detalles.

  • Ver también Renderizado Condicional - v-if

v-else ​

Denota el "bloque else" para v-if o para una cadena v-if / v-else-if.

  • No espera expresión

  • Detalles

    • Restricción: el elemento hermano anterior debe tener v-if o v-else-if.

    • Puede usarse en <template> para denotar un bloque condicional que contiene solo texto o múltiples elementos.

  • Ejemplo

    template
    <div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

  • Ver también Renderizado Condicional - v-else

v-else-if ​

Denota el "bloque else if" para v-if. Puede encadenarse.

  • Espera: any

  • Detalles

    • Restricción: el elemento hermano anterior debe tener v-if o v-else-if.

    • Puede usarse en <template> para denotar un bloque condicional que contiene solo texto o múltiples elementos.

  • Ejemplo

    template
    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

  • Ver también Renderizado Condicional - v-else-if

v-for ​

Renderiza el elemento o bloque de template múltiples veces basándose en los datos de origen.

  • Espera: Array | Object | number | string | Iterable

  • Detalles

    El valor de la directiva debe usar la sintaxis especial alias in expresion para proporcionar un alias para el elemento actual que se está iterando:

    template
    <div v-for="item in items">
  {{ item.text }}
</div>

    Alternativamente, también puedes especificar un alias para el índice (o la key si se usa en un Object):

    template
    <div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

    El comportamiento por defecto de v-for intentará actualizar los elementos en su lugar sin moverlos. Para forzarlo a reordenar los elementos, debes proporcionar una pista de ordenación con el atributo especial key:

    template
    <div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

    v-for también puede funcionar con valores que implementan el Protocolo Iterable, incluyendo Map y Set nativos.

  • Ver también

v-on ​

Adjunta un escuchador de eventos al elemento.

  • Abreviatura: @

  • Espera: Function | Declaración en Línea | Object (sin argumento)

  • Argumento: event (opcional si se usa la sintaxis Object)

  • Modificadores

    • .stop - llama a event.stopPropagation().
    • .prevent - llama a event.preventDefault().
    • .capture - añade el escuchador de eventos en modo de captura.
    • .self - solo dispara el manejador si el evento fue despachado desde este elemento.
    • .{keyAlias} - solo dispara el manejador en ciertas keys.
    • .once - dispara el manejador como máximo una vez.
    • .left - solo dispara el manejador para eventos del botón izquierdo del ratón.
    • .right - solo dispara el manejador para eventos del botón derecho del ratón.
    • .middle - solo dispara el manejador para eventos del botón central del ratón.
    • .passive - adjunta un evento DOM con { passive: true }.

  • Detalles

    El tipo de evento se denota por el argumento. La expresión puede ser el nombre de un método, una declaración en línea, u omitirse si hay modificadores presentes.

    Cuando se usa en un elemento normal, escucha solo a eventos DOM nativos. Cuando se usa en un componente de elemento personalizado, escucha a eventos personalizados emitidos en ese componente hijo.

    Al escuchar eventos DOM nativos, el método recibe el evento nativo como único argumento. Si se usa una declaración en línea, la declaración tiene acceso a la propiedad especial $event: v-on:click="handle('ok', $event)".

    v-on también admite la vinculación a un objeto de pares de evento / escuchador sin un argumento. Ten en cuenta que al usar la sintaxis de objeto, no admite ningún modificador.

  • Ejemplo

    template
    <!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter" />

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

    Escuchando eventos personalizados en un componente hijo (el manejador se llama cuando "my-event" es emitido en el hijo):

    template
    <MyComponent @my-event="handleThis" />

<!-- inline statement -->
<MyComponent @my-event="handleThis(123, $event)" />

  • Ver también

v-bind ​

Vincula dinámicamente uno o más atributos, o una prop de componente a una expresión.

  • Abreviatura:

    • : o . (cuando se usa el modificador .prop)
    • Omitiendo valor (cuando el atributo y el valor vinculado tienen el mismo nombre, requiere 3.4+)

  • Espera: any (con argumento) | Object (sin argumento)

  • Argumento: attrOrProp (opcional)

  • Modificadores

    • .camel - transforma el nombre del atributo kebab-case a camelCase.
    • .prop - fuerza que una vinculación se establezca como una propiedad DOM (3.2+).
    • .attr - fuerza que una vinculación se establezca como un atributo DOM (3.2+).

  • Uso

    Cuando se usa para vincular el atributo class o style, v-bind admite tipos de valores adicionales como Array u Object. Consulta la sección de la guía enlazada a continuación para más detalles.

    Al establecer una vinculación en un elemento, Vue por defecto comprueba si el elemento tiene la key definida como una propiedad usando una verificación con el operador in. Si la propiedad está definida, Vue establecerá el valor como una propiedad DOM en lugar de un atributo. Esto debería funcionar en la mayoría de los casos, pero puedes anular este comportamiento usando explícitamente los modificadores .prop o .attr. Esto es a veces necesario, especialmente cuando se trabaja con elementos personalizados.

    Cuando se usa para la vinculación de una prop de componente, la prop debe declararse correctamente en el componente hijo.

    Cuando se usa sin un argumento, puede usarse para vincular un objeto que contiene pares de nombre-valor de atributo.

  • Ejemplo

    template
    <!-- bind an attribute -->
<img v-bind:src="imageSrc" />

<!-- dynamic attribute name -->
<button v-bind:[key]="value"></button>

<!-- shorthand -->
<img :src="imageSrc" />

<!-- same-name shorthand (3.4+), expands to :src="src" -->
<img :src />

<!-- shorthand dynamic attribute name -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop binding. "prop" must be declared in the child component. -->
<MyComponent :prop="someThing" />

<!-- pass down parent props in common with a child component -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    El modificador .prop también tiene una abreviatura dedicada, .:

    template
    <div :someProperty.prop="someObject"></div>

<!-- equivalent to -->
<div .someProperty="someObject"></div>

    El modificador .camel permite camelizar un nombre de atributo v-bind cuando se usan templates en el DOM, por ejemplo, el atributo SVG viewBox:

    template
    <svg :view-box.camel="viewBox"></svg>

    .camel no es necesario si estás utilizando templates de cadena, o pre-compilando el template con un paso de construcción.

  • Ver también

v-model ​

Crea una vinculación bidireccional en un elemento de entrada de formulario o un componente.

v-slot ​

Denota slots nombrados o slots con ámbito que esperan recibir props.

  • Abreviatura: #

  • Espera: Expresión JavaScript válida en una posición de argumento de función, incluyendo soporte para desestructuración. Opcional - solo es necesaria si se esperan props para el slot.

  • Argumento: nombre del slot (opcional, por defecto default)

  • Limitado a:

    • <template>
    • componentes (para un slot por defecto solitario con props)

  • Ejemplo

    template
    <!-- Named slots -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- Named slot that receives props -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- Default slot that receive props, with destructuring -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

  • Ver también

v-pre ​

Omite la compilación para este elemento y todos sus hijos.

  • No espera expresión

  • Detalles

    Dentro del elemento con v-pre, toda la sintaxis de template de Vue se conservará y se renderizará tal cual. El caso de uso más común es mostrar etiquetas de bigotes sin procesar.

  • Ejemplo

    template
    <span v-pre>{{ this will not be compiled }}</span>

v-once ​

Renderiza el elemento y el componente una sola vez, y omite futuras actualizaciones.

  • No espera expresión

  • Detalles

    En renderizados posteriores, el elemento/componente y todos sus hijos serán tratados como contenido estático y se omitirán. Esto puede usarse para optimizar el rendimiento de las actualizaciones.

    template
    <!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
  <h1>Comment</h1>
  <p>{{msg}}</p>
</div>
<!-- component -->
<MyComponent v-once :comment="msg"></MyComponent>
<!-- `v-for` directive -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

    Desde la versión 3.2, también puedes memoizar parte de el template con condiciones de invalidación usando v-memo.

  • Ver también

v-memo ​

  • Solo compatible con 3.2+

  • Espera: any[]

  • Detalles

    Memoiza un subárbol de el template. Puede usarse tanto en elementos como en componentes. La directiva espera un array de longitud fija de valores de dependencia para comparar para la memoización. Si cada valor en el array fue el mismo que en el último renderizado, entonces las actualizaciones para todo el subárbol se omitirán. Por ejemplo:

    template
    <div v-memo="[valueA, valueB]">
  ...
</div>

    Cuando el componente se vuelve a renderizar, si tanto valueA como valueB permanecen iguales, todas las actualizaciones para este <div> y sus hijos se omitirán. De hecho, incluso la creación de VNode del DOM Virtual también se omitirá ya que la copia memoizada del subárbol puede ser reutilizada.

    Es importante especificar el array de memoización correctamente, de lo contrario podríamos omitir actualizaciones que sí deberían aplicarse. v-memo con un array de dependencias vacío (v-memo="[]") sería funcionalmente equivalente a v-once.

    Uso con v-for

    v-memo se proporciona únicamente para micro-optimizaciones en escenarios críticos de rendimiento y rara vez debería ser necesario. El caso más común donde esto puede ser útil es al renderizar grandes listas con v-for (donde length > 1000):

    template
    <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

    Cuando el estado selected del componente cambia, se creará una gran cantidad de VNodes a pesar de que la mayoría de los elementos permanecieron exactamente iguales. El uso de v-memo aquí está diciendo esencialmente "solo actualiza este elemento si pasó de no seleccionado a seleccionado, o viceversa". Esto permite que cada elemento no afectado reutilice su VNode anterior y omita por completo la comparación (diffing). Ten en cuenta que no necesitamos incluir item.id en el array de dependencia de memo aquí ya que Vue lo infiere automáticamente de la key del elemento.

    WARNING

    Cuando uses v-memo con v-for, asegúrate de que se utilicen en el mismo elemento. v-memo no funciona dentro de v-for.

    v-memo también puede usarse en componentes para prevenir manualmente actualizaciones no deseadas en ciertos casos extremos donde la verificación de actualización del componente hijo ha sido desoptimizado. Pero de nuevo, es responsabilidad del desarrollador especificar arrays de dependencia correctos para evitar omitir actualizaciones necesarias.

  • Ver también

v-cloak ​

Se utiliza para ocultar el template sin compilar hasta que esté lista.

  • No espera expresión

  • Detalles

    Esta directiva solo es necesaria en configuraciones sin paso de construcción.

    Al usar templates en el DOM, puede haber un "destello de templates sin compilar": el usuario puede ver etiquetas de bigotes sin procesar hasta que el componente montado las reemplace con contenido renderizado.

    v-cloak permanecerá en el elemento hasta que la instancia del componente asociado esté montada. Combinado con reglas CSS como [v-cloak] { display: none }, se puede usar para ocultar los templates sin procesar hasta que el componente esté listo.

  • Ejemplo

    css
    [v-cloak] {
  display: none;
}
    template
    <div v-cloak>
  {{ message }}
</div>

    El <div> no será visible hasta que la compilación haya finalizado.

Edita esta página en GitHub