Directivas

En Vue.js, las directivas son atributos especiales que se utilizan para extender el comportamiento de los elementos HTML en tus aplicaciones Vue. Estas directivas se utilizan para manipular el DOM, aplicar lógica condicional, realizar enlaces de datos y mucho más.

Vue.js proporciona varias directivas integradas, como v-if, v-for, v-bind y v-on, entre otras. Cada directiva se identifica mediante el prefijo «v-» seguido del nombre de la directiva. Por ejemplo, v-if se utiliza para renderizar condicionalmente un elemento basado en una expresión booleana.

Aquí hay algunas directivas comunes en Vue.js:

1. v-if: Renderiza o elimina condicionalmente un elemento basado en una expresión booleana.
2. v-for: Itera sobre una matriz o un objeto y renderiza dinámicamente elementos basados en cada elemento de la colección.
3. v-bind o :: Enlaza dinámicamente los atributos HTML a expresiones o propiedades de datos en Vue.
4. v-on o @: Escucha eventos del DOM y ejecuta métodos o expresiones en respuesta a esos eventos.
5. v-model: Crea un enlace bidireccional entre un elemento de formulario y una propiedad de datos en Vue, lo que permite la actualización automática de los valores entre ambos.

Estas son solo algunas de las directivas más utilizadas, pero Vue.js proporciona muchas más directivas que puedes explorar según tus necesidades. También puedes crear tus propias directivas personalizadas si necesitas una funcionalidad específica que no se cubra con las directivas integradas.

Las directivas son una parte fundamental de Vue.js y son una forma poderosa de controlar y manipular el comportamiento de tus componentes Vue en el DOM.

Ejemplos:

v-if

<template>
	<h1 v-if="age < 18">Eres menor de edad</h1>
	<h1 v-else>Eres mayor de edad</h1>
</template>

<script lang="ts" setup>
let age = 18;
</script>
<style scoped></style>

v-for

<template>
	<ul>
		<li v-for="country in countries" v-bind:key="country">
			{{ country }}
		</li>
	</ul>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue';
let countries: Ref<Array<string>> = ref([
	'Spain',
	'France',
	'UK',
	'Italy',
	'Portugal',
	'Perú',
]);
</script>
<style scoped></style>

Con Objetos:

<template>
	<ul>
		<li v-for="country in countries" v-bind:key="country.code">
			{{ country.name }} [{{ country.code }}]
		</li>
	</ul>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue';
interface ICountry {
	code: string;
	name: string;
}
let countries: Ref<Array<ICountry>> = ref([
	{
		code: 'es',
		name: 'Spain',
	},
	{
		code: 'en',
		name: 'UK',
	},
	{
		code: 'fr',
		name: 'France',
	},
	{
		code: 'it',
		name: 'Italy',
	},
	{
		code: 'pt',
		name: 'Portugal',
	},
	{
		code: 'pe',
		name: 'Perú',
	},
]);
</script>

<style scoped></style>

V-Bind

<template>
	<p
		v-bind:class="{
			danger: hasError,
		}"
	>
		El mensaje se a enviado satisfactoriamente
	</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'ClassBind',
	setup() {
		let hasError = false;
		return { hasError };
	},
});
</script>

<style>
.danger {
	color: red;
}
</style>

<template>
	<p
		:class="{
			danger: hasError,
		}"
	>
		El mensaje se a enviado satisfactoriamente
	</p>
</template>

<script lang="ts" setup>
let hasError = true;
</script>

<style>
.danger {
	color: red;
}
</style>

Binding de estilos

<template>
	<p
		v-bind:style="{
			backgroundColor: '#ccc',
			color: '#101010',
			padding: '15px',
		}"
	>
		El mensaje se a enviado satisfactoriamente
	</p>
</template>

<script lang="ts" setup></script>

<style></style>

V-ON

<template>
	<p
		v-bind:style="{
			backgroundColor: c,
			color: '#fff',
			padding: '15px',
		}"
	>
		El mensaje se a enviado satisfactoriamente
	</p>
	<button v-on:click="handleClick">Cambiar color</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
let c = ref('#343434');
const handleClick = () => (c.value = '#101010');
</script>

<style></style>