{

Directivas y
eventos de Vue
let Integrantes:{
Oscar Emiliano Alvarado Aguilar,
Gustavo Ángel Contreras López,
José Iván Solorio Serna,
Miguel Ángel Sánchez Tapia,
Isaac Esaú Velásquez Ontiveros,
}
}
 Directivas
Son atributos especiales que se Estas directivas permiten realizar
colocan en las etiquetas HTML y están acciones dinámicas potentes (bucl
prefijados por v- como, por es, condicionales, etc...) que no
ejemplo, v-for, v-bind o v-on, se pueden realizar en HTML por sí
entre muchas otras. solo, pero que Vue permite utiliz
ar en sus etiquetas <template>.

} ..
Directivas de Vue

*
Dichas directivas están formadas por
varias partes:
● Directiva: El nombre de la directiva, es
posible abreviarlo a un carácter.
● Argumento: En ciertas directivas se
indica un parámetro.
● Modificador: En ciertas directivas se
indica un parámetro.
● Valor: En ciertas directivas se requiere
establecer un valor.
 Tipos de directivas
{

}
{ .. Directivas básicas
v-text v-html v-pre
Equivalente a {{ texto Inserta HTML en un Mantiene las {{
}}. elemento sin templates }} del
Usa .textContent interna procesarlo. elemento intactas,
mente. Usa .innerHTML intername sin renderizar.
nte.

v-once v-cloak v-model

Renderiza las {{ templates Directiva que permanece Enlaza el valor de una
}} solo la primera vez, y hasta que la {{ template variable con
no lo hace más. }} se renderiza con un <input>, <select>, <te
contenido. xtarea> o un componente.

} ..
La directiva v-html
Si quisiéramos incluir código
HTML en una de esas variables, se
mostrarían las etiquetas
literalmente. La directiva v-html
funciona exactamente igual que v-
text, solo que, en lugar de
mostrar las etiquetas, las
procesa y renderiza.
 La directiva v-pre
En algunas raras ocasiones, podríamos necesitar escribir literal y textualmente el
texto {{ nickname }}, por ejemplo, y no querer que se renderice con el valor de la
variable nickname. Para conseguir esto, podemos utilizar la directiva v-pre, la cual
evita que se rendericen las plantillas que contenga y las de todos los hijos:
 La directiva v-once
Muy similar es la directiva v-once, la Por esa razón, la
cuál permite que se renderice la directiva v-once puede ser
interesante en las
plantilla que contenga una etiqueta,
situaciones en las que solo
pero sólo la primera vez. Vue incorpora desees que tome el valor que
una característica muy deseable tiene la primera vez, aunque
denominada reactividad. estos casos suelen ser casos
límites muy particulares que
se usan muy pocas veces.
{ ..

Directivas
Condicionales

} ..
 Directiva vue Descripción

Muestra/oculta el

{ Condicionales v-show elemento, alternando

con un display: none.

Equivalente a un if de
Javascript. Acepta una
Las directivas de Vue v-show y v- v-if
expresión Javascript por
if nos permiten
parámetro.
establecer condiciones directamente
en nuestro etiquetado HTML, sin
Equivalente a un else
tener que recurrir a lógica
Javascript o realizar código más
if de Javascript. Acepta
v-else-if
complejo.
una expresión Javascript
por parámetro.

... v-else
Equivalente a un else de
Javascript. No tiene
parámetros. }
 Directiva
{ v-show
La directiva v-show se define
como una directiva que muestra u
oculta algo, dependiendo del
valor BOOLEAN que tenga: si
es true lo muestra, si
es false lo oculta con CSS,
mediante un display: none.

... }
<template>
<div>
Usuario: Manz
<span v-
if="login">(Identificado)</span>
Directiva
{
<span v-else>(No
identificado)</span>
</div>
</template> v-if
<script> La directiva v-if hace algo muy parecido
export default { a la directiva v-show pero tiene una
name: "App", diferencia principal: mientras que v-
data() { show mantiene el código en el HTML y lo
return { oculta o muestra con CSS dependiendo del
login: true valor indicado, v-if evaluará la

}
} condición y si es falsa no la colocará
} en el HTML.
}
</script>
{ ..

Directivas
Para Bucles

} ..
Directiva v-for
La directiva v-for es muy interesante
para crear estructuras repetitivas de código
HTML de una forma sencilla y sin que el código
resulte excesivamente complejo.

} ..
Directiva v-for

//Este código no nos servirá

Directiva :key
Aunque el código anterior es teóricamente
correcto, si intentamos ejecutarlo,
probablemente obtendremos un error del linter en
el cuál se nos avisa que se esperaba una
directiva v-bind:key junto al v-for y no se ha
encontrado:

<template>
<div>
<div v-for="(item, index) in array"
:key="index">{{ index }}. {{ item }}
</div>
</div>
</template>
} ..
Iterando otro tipo de datos
Con la directiva v-for podemos iterar varios tipos
de datos (en general cualquiera que sea iterable)
{ No mezclar v-for
con v-if

Hay que tener mucho cuidado a la

hora de utilizar directivas v-
for en combinación con
directivas v-if, puesto que no
son compatibles.

... }
Directiva v-bind(Enlaces)

Esta directiva
permite enlazar (bindear) una
variable de Vue con un atributo
específico de una etiqueta HTML.
De esta forma, podemos colocar
como valor de un atributo HTML el
contenido que tengamos almacenado
en una variable de la lógica de
Javascript.
 { Uso básico del v-bind
Observa que la vamos a utilizar dos veces, una
para el atributo src (que recogerá el contenido
de la variable image) y otra para el
atributo alt (que recogerá el contenido de la
variable text). NOTA:
La directiva v-bind se puede
abreviar simplemente
omitiendo v-bind y manteniendo
solamente los dos puntos ( :).
Esta es la sintaxis más frecuente
y la que comenzaremos a usar.

} ..
 Bindeo de style(Dinamico)
El bindeo es más comúnmente usado en el
enlace de estilos css a etiquetas html las
cuales tienen la capacidad de ser reactivas,
además de ser más fácil su implementación
dinámica
{ ..

Directivas
Para Eventos

} ..
 Que es v-on
La directiva v-on (abreviada como @) es
una directiva utilizada para
gestionar los eventos del DOM desde
los templates de Vue, permitiendo
escribir mucho menos código. Así nos
ahorramos realizar .addEventListener(), y
en su lugar definimos las acciones
de forma mucho más directa.
 Como funciona?

el peso de la lógica recae íntegramente

en la parte Javascript, simplemente
utilizamos el nombre de
un id o class para hacer referencia a
él.
En Vue, la forma de realizar esto, se
reduce al siguiente código:
 Controlar varios eventos
Podemos crear un objeto en nuestro apartado data de Vue, y en su
interior colocar las funciones específicas, utilizando la key de
la propiedad como nombre del evento en cuestión:
Modificadores
Modificadores de teclas