Cómo utilizar directivas personalizadas en Vue.JS

Lo que les traemos esta vez es cómo usar las instrucciones personalizadas de Vue.JS y cuáles son las precauciones para usar las instrucciones personalizadas de Vue.JS. El siguiente es un ejemplo práctico, echemos un vistazo.

Vue.js te permite registrar directivas personalizadas, lo que esencialmente te permite enseñarle a Vue algunos trucos nuevos: cómo asignar cambios de datos al comportamiento DOM. Puede registrar una directiva personalizada global pasando la identificación de la directiva y el objeto de definición usando el método Vue.directive(id, definición). Para definir el objeto es necesario proporcionar algunas funciones de enlace (todas funciones opcionales):

Enlace: solo se llama una vez cuando la instrucción vincula el elemento por primera vez.

Actualización: se llama inmediatamente después del primer enlace para obtener el valor inicial del enlace; posteriormente se llama cada vez que el valor del enlace cambia para obtener los valores nuevos y antiguos.

Desvincular: Se llama solo una vez cuando el comando desvincula un elemento.

Ejemplo:

Vue.directive('my-directive', { bind: function () { // Realizar el trabajo preparatorio para el enlace

// Por ejemplo, agregar un detector de eventos u otras operaciones complejas que solo deben realizarse una vez

}, update.function (newValue, oldValue) { // Realizar actualizaciones basadas en el nuevo valor obtenido

// También llama al valor inicial una vez

}, desenlazar: función () { // Realizar trabajo de limpieza

// Por ejemplo, eliminar en bind()

} Oyentes de eventos agregados en bind()

}, unbind: function () { // Haciendo limpieza

// Como eliminar los oyentes de eventos agregados en bind( )

}

}

} p>

}

}) Una vez registrada la directiva personalizada , puede utilizar esta directiva en plantillas .js. Usado en la plantilla js (use el prefijo de directiva Vue.js, el valor predeterminado es v-):

Si solo necesita la función de actualización, Solo puede usar la función de actualización, solo necesita una función en lugar del objeto de definición:

Vue.directive('my-directive',function (value) { // Esta función Usado como función update()}) Todas las funciones de enlace se copiarán en el objeto de directiva real, y este objeto de directiva se convertirá en el contexto this

para todas las funciones de enlace. Hay algunas propiedades públicas útiles en el objeto de directiva:

el: el elemento al que está vinculada la directiva

vm: el contexto ViewModel propietario de la directiva

expresión: la expresión de la directiva Fórmula, excluyendo parámetros y filtros

arg: parámetros de la instrucción

raw: expresión cruda de la instrucción, no será analizada