Las directivas personalizadas le permiten ampliar la funcionalidad de sus páginas web de Vue de forma escalable y modular.

Las directivas son construcciones de programación que especifican cómo los intérpretes y compiladores deben procesar las entradas para una operación. Las directivas de Vue amplían la funcionalidad de los elementos HTML en las plantillas de Vue, lo que permite la manipulación directa del DOM.

Puede usar directivas en Vue para agregar detectores de eventos, entre otras operaciones. Adjuntará atributos adicionales a elementos HTML para usar directivas en su aplicación.

La estructura de las directivas de Vue

Las directivas en Vue tienen un v- prefijo para distinguirlos de los atributos HTML regulares. El v- prefix le dice al compilador de Vue que el atributo es una directiva de Vue para que pueda procesar y aplicar el comportamiento de esa directiva al elemento HTML.

He aquí un ejemplo que demuestra el uso de la v-mostrar atributo para mostrar el contenido de un h2 elemento:

instagram viewer

"verdadero">Hola Vue</h2>

Vue.js tiene muchas más directivas integradas como unión en v, v-si, y v-en, permitiéndole realizar tareas como el enlace de datos, representación condicional, manejo de eventos, y más.

Definición de directivas personalizadas en Vue

Puede definir directivas personalizadas para agregar funciones nuevas y reutilizables para sus aplicaciones Vue.js. La creación de directivas personalizadas requiere dos pasos principales. Primero, registrará la directiva local o globalmente. Luego, definirá el comportamiento de la directiva con enlaces de ciclo de vida.

Registro de directivas personalizadas

Puede registrar una directiva personalizada en Vue local o globalmente, según su alcance previsto. Sin embargo, es una práctica más común registrar directivas globalmente. Esto garantiza que las directivas estén disponibles en todas partes dentro de su aplicación Vue.

Puede registrar directivas personalizadas localmente si tiene la intención de usar la directiva personalizada dentro de un componente Vue simple. Así es como puede registrar un v-cambiar de color directiva localmente: