Saltar al contenido

La creación de directivas personalizadas en VueJSFeb, 26thIn esta guía, vamos a aprender acerca de cómo crear a medida …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear directivas personalizadas en vuejs.

¿Qué es una directiva?

Directivas

son atributos HTML personalizado con el prefijo que indica V- biblioteca para hacer algo que los elementos conla dom.

Ejemplo: v-modelo, v-si, v-para (estos son algunos construidos en directivas).

Creación de un

Directiva

Vamos a crear nuestra propia directiva personalizada denominada V-emoji que nos ayuda a añadimos el Emojis toour contenido.

Directivas global se puede añadir antes de la instancia Vue en main.js archivo.

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

Vue.directive("emoji", { inserted: function(el) { el.textContent += ; }});
new Vue({
render: h => h(App)
}).$mount("#app");

En el código anterior hemos creado una directiva llamada emoji donde inserta un gancho ciclo de vida de la Directiva.

inserta : llama cuando un elemento de atado ha sido inserta en su nodo padre (esto sólo garantiza presencia nodo padre, no necesariamente en-documento).

Cada gancho puede aceptar cuatro parámetros el, unión, vnode, oldvnode.

Utilizando nuestra costumbre el uso de la Directiva

dejar que nuestra directiva propia dentro de la plantilla.