Directivas personalizadas de Vue.js con función abreviada

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

Las directivas personalizadas permiten a los desarrolladores crear y utilizar fácilmente algunas funciones personalizadas en los elementos. Al igual que las directivas integradas que son como v-model, v-for, v-if, etc., podemos crear nuestras propias directivas según lo que establezcamos. Permite reutilizar algo de lógica al tener acceso al nivel inferior de DOM. También podemos pasar datos a las directivas personalizadas.

Las Directivas Personalizadas con Atajo de Función permiten crear las directivas cuando tenemos la misma función si el ítem está montado o actualizado. Esto no requiere enlaces adicionales y la directiva se declara como una función.

Sintaxis: Declare el nombre de la directiva y luego declare la función en sí. Esto se llama cada vez que se monta o actualiza el elemento.

const app = createApp(App);
app.directive("customDirective", (el, binding) => {
    // code for directive
});

Ejemplo: En el siguiente ejemplo, tenemos una directiva personalizada llamada entrada para los elementos de entrada para colocar fácilmente el color y el texto de marcador de posición en los elementos de entrada. Crearemos la directiva personalizada con abreviatura de función.

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2: en el archivo main.js, antes de montar, declare la directiva con la entrada de nombre y luego cambie el marcador de posición y el valor de acuerdo con la entrada.

import { createApp } from "vue";
import App from "./App.vue";
  
const app = createApp(App);
app.directive("input", (el, binding) => {
  console.log(binding.value);
  el.placeholder = binding.value.placeholder;
  el.style.color = binding.value.color;
});
app.mount("#app");

Paso 3: dentro de la sección de plantilla de archivo App.vue, podemos usar la abreviatura de función en nuestros elementos de entrada. 

<script>
  export default {
    name: "App",
    components: {},
  };
</script>
  
<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
        GeeksforGeeks
    </h1>
    <strong>
        Vue.js Custom Directives with Function Shorthand
    </strong>
    <br />
  </center>
  <center>
    <input
      type="text"
      v-input="{ placeholder: 'Yellow Input', color: 'yellow' }"/>
    <input
      type="text"
      v-input="{ placeholder: 'Search Tutorials', color: 'green' }"/>
  </center>
</template>

Paso 4: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida: al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/guide/reusability/custom-directives.html#function-shorthand