Directives en Vue.js le permite aplicar comportamientos especiales a elementos en el DOM. Están prefijados con la v- sintaxis y se usan para manipular el DOM, manejar eventos, representar elementos condicionalmente y más. Vue.js proporciona varios integrados directives, como, , y, que cubren una amplia gama de casos de uso comunes. v-if v-for v-bind v-on
Aquí hay algunos comunes directives en Vue.js:
1. Directiva: esta directiva se usa para representar condicionalmente un elemento basado en una condición. v-if
Ejemplo:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Directiva: esta directiva se usa para iterar sobre una matriz o un objeto y crear los elementos correspondientes. v-for
Ejemplo:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Directiva: esta directiva se utiliza para vincular el valor de una expresión a un atributo o una propiedad de un elemento. v-bind
Ejemplo:
<img v-bind:src="imageUrl">
4. Directiva: esta directiva se usa para escuchar y manejar eventos en un elemento. v-on
Ejemplo:
<button v-on:click="handleClick">Click me!</button>
5. Directiva: esta directiva crea un enlace bidireccional entre un elemento de entrada y una propiedad de datos. v-model
Ejemplo:
<input v-model="message">
Estos son solo algunos básicos directives en Vue.js. También puede crear su propia personalización directives para realizar comportamientos específicos en su aplicación Vue.js.