Directivas integradas de Vue3

Vue.js incluye múltiples directivas integradas para agregar comportamiento reactivo específico o manipular el DOM en las plantillas.

A continuación se presentan las directivas integradas más comunes en Vue.js:

Directiva Ejemplo de uso Descripción
v-text <p v-text="message"></p> Actualiza el texto del elementotextContent, similar a la interpolación{{ }}, pero es un enlace unidireccional.
v-html <div v-html="htmlContent"></div> Actualiza el contenido HTML del elementoinnerHTML, utilizado para generar HTML.
v-model <input v-model="value"> Crea un enlace de datos bidireccional en los elementos de control de formulario, sincronizando los campos de entrada con las propiedades de datos.
v-show <div v-show="isVisible"></div> Según si la expresión es verdadera o falsa, alterna la visualización y ocultación del elemento, usando ladisplaypropiedad CSS.
v-if <p v-if="isVisible">Visible</p> Renderiza condicionalmente el elemento según si la expresión es verdadera o falsa; cuando la condición es falsa, el elemento se elimina del DOM.
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifDirectiva complementaria de v-if, utilizada para mostrar contenido alternativo cuando la condición es falsa.
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> Se usa de forma consecutiva después dev-ifyv-else, para la evaluación de múltiples condiciones.
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> Itera sobre cada elemento de un array u objeto y genera la cantidad correspondiente de elementos.
v-on <button v-on:click="handleClick">Click me</button> Vincula un detector de eventos para escuchar eventos del DOM; se puede abreviar como@。
v-bind <img v-bind:src="imageSrc.html"> Vincula dinámicamente atributos HTML; se puede abreviar como:。
v-slot <template v-slot:header><h2>Header</h2></template> Es la sintaxis para los slots con nombre; proporciona una ubicación para insertar contenido de componentes secundarios.
v-pre <div v-pre>{{ message }}</div> Omite el proceso de compilación de este elemento y de todos sus subelementos; se utiliza para mostrar etiquetas Mustache sin procesar.
v-cloak [v-cloak] { display: none; } Oculta el contenido de la plantilla antes de que la instancia de Vue termine de compilar, evitando mostrar etiquetas Mustache sin compilar.
v-once <p v-once>{{ message }}</p> Renderiza el elemento y el componente solo una vez; no se actualizará con los cambios posteriores de datos.
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

Almacena en caché el subárbol de una plantilla.

Cuando el componente se vuelve a renderizar, sivalueAyvalueBse mantienen sin cambios, este<div>y todas las actualizaciones de sus subelementos serán omitidas. De hecho, incluso la creación de vnodes del DOM virtual será omitida, porque se puede reutilizar una copia del subárbol en caché.

v-text

  • Uso: <p v-text="message"></p>
  • Descripción: Actualiza el texto del elementotextContent, similar a la interpolación{{ }}, pero es un enlace unidireccional. Se puede utilizar para establecer el contenido de texto plano del elemento.

Ejemplo

<p v-text="message"></p>

Ejemplo

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-html

  • Uso: <div v-html="htmlContent"></div>
  • Descripción: Actualiza el contenido HTML del elementoinnerHTML, utilizado para generar contenido con estructura HTML. Se debe prestar atención a la seguridad para evitar ataques XSS.

Ejemplo

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

Ejemplo

data() {
    return {
        htmlContent: '<strong>Vue.js</strong> is awesome!'
    };
}

v-model

  • Uso: <input v-model="value">
  • Descripción: Crea un enlace de datos bidireccional en los elementos de control de formulario, sincronizando los campos de entrada con las propiedades de datos, y admite varios tipos de controles de formulario.

Ejemplo

<input type="text" v-model="message">

Ejemplo

data() {
    return {
    message: ''
    };
}

v-show

  • Uso: <div v-show="isVisible"></div>
  • Descripción: Según si la expresión es verdadera o falsa, alterna la visualización y ocultación del elemento, usando ladisplaypropiedad CSS que controla la visibilidad del elemento.

Ejemplo

<div v-show="isVisible">Visible when true</div>

Ejemplo

data() {
    return {
    isVisible: true
    };
}

v-if / v-else / v-else-if

  • Uso: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • Descripción: Renderiza condicionalmente el elemento según si la expresión es verdadera o falsa.v-elseyv-else-ifSív-ifDirectiva complementaria de v-if, utilizada para la evaluación de múltiples condiciones.

Ejemplo

<p v-if="isVisible">Visible</p>
<p v-else>Not Visible</p>

Ejemplo

data() {
    return {
        isVisible: true
    };
}

v-for

  • Uso: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • Descripción: Itera sobre cada elemento de un array u objeto, genera la cantidad correspondiente de elementos y admite especificar una clave (key) para mejorar la eficiencia del renderizado.

Ejemplo

<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

Ejemplo

data() {
    return {
        items: ['Apple', 'Banana', 'Cherry']
    };
}

v-on (@)

  • Uso: <button v-on:click="handleClick">Click me</button>
  • Descripción: Vincula un detector de eventos, utilizado para escuchar eventos del DOM; se puede abreviar como@. Admite modificadores y nombres de eventos dinámicos.

Ejemplo

<button v-on:click="handleClick">Click me</button>

Ejemplo

methods: {
    handleClick() {
    alert('Button clicked');
    }
}

v-bind ( : )

  • Uso: <img v-bind:src="imageSrc.html">
  • Descripción: Vincula dinámicamente atributos HTML; se puede abreviar como:. Se utiliza para establecer dinámicamente atributos del elemento, como por ejemplosrc、href, etc.

Ejemplo

<img v-bind:src="imageSrc" alt="Vue Logo">

Ejemplo

data() {
    return {
    imageSrc: 'https://vuejs.org/images/logo.png'
    };
}

v-slot

  • Uso: <template v-slot:header><h2>Header</h2></template>
  • Descripción: Es la sintaxis para slots con nombre; proporciona una posición para insertar el contenido de componentes secundarios, utilizada para la distribución de contenido en componentes personalizados.

Ejemplo

<BaseLayout>
    <template v-slot:header>
    <h2>Header Content</h2>
    </template>
    <template v-slot:footer>
    <p>Footer Content</p>
    </template>
</BaseLayout>

Ejemplo

// Definición del componente BaseLayout
Vue.component('BaseLayout', {
    template: `
    <div>
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><slot name="footer"></slot></footer>
    </div>
    `
});

v-pre

  • Uso: <div v-pre>{{ message }}</div>
  • Descripción: Omite el proceso de compilación de este elemento y de todos sus subelementos; se usa para mostrar etiquetas Mustache sin procesar, evitando que Vue compile el contenido.

Ejemplo

<div v-pre>{{ message }}</div>

Ejemplo

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-cloak

  • Uso: [v-cloak] { display: none; }
  • Descripción: Oculta el contenido de la plantilla antes de que la instancia de Vue complete la compilación, evitando mostrar etiquetas Mustache sin compilar.

Ejemplo

<div v-cloak>{{ message }}</div>

Ejemplo

[v-cloak] { display: none; }

Ejemplo

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-once

  • Uso: <p v-once>{{ message }}</p>
  • Descripción: Renderiza el elemento y el componente solo una vez; no se actualizará con los cambios posteriores de datos. Se usa para contenido estático o que se actualiza con poca frecuencia.

Ejemplo

<p v-once>{{ message }}</p>

Ejemplo

data() {
    return {
    message: 'Hello, Vue!'
    };
}
Otras extensiones