Vuejs directivas

Vuejs directivas
Escrito 2 years ago

En otras entradas hablamos de Vuejs. Un framework MVVM. Hoy vamos hablar de varias de sus características de como crear directivas para Vuejs.

¿Qué es una directiva?

En vuejs, una directiva es un atributo html que realiza una acción javascript sobre la etiqueta que contiene la directiva. Vuejs tiene ya tiene creada una serie de directivas dentro de su núcleo que puedes utilizar libremente. Directivas de vuejs.

Por ejemplo. La directiva v-bind permite cambiar los valores de los atributos de las etiquetas html. Ver ejemplo

Crear tu propia directiva

Ya sabemos que vuejs tiene una lista de directivas ya incluida, pero podemos crear nuevas directivas que realicen una infinidad de tareas de una manera sencilla.

Ejemplo

Código para la directiva color
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Añadimos una directiva a Vue.
Vue.directive("color", {
// Función que se ejecuta cuando se inserta por primera ve el el elemento que contiene la directiva.
"bind": function(){
console.log("directiva activa");
},

// Función que se ejecuta cuando el elemento que contiene la directiva es eliminado.
"unbind": function(){
console.log("directiva desactivada");
},

//Función que se ejecuta cada vez que la variable color se actualiza.
"update": function(newValue, oldValue){
var el = $(this.el); // this.el contiene el elemento de la directiva.

//Comprobamos el argumento de la directiva.
if(this.arg == 'background')
el.css('background', newValue);
else
el.css('color', newValue);
}
});

// Inicializamos Vue
new Vue({el: '#app'});

En este ejemplo tenemos una directiva sencilla llamada color. Esta directiva cambia el color de la letra o del fondo de la etiqueta que la contiene. Es un ejemplo poco práctico pero servirá para explicar algunas de las partes más importantes de las directivas.

  • Función bind(). Esta función se ejecuta una única vez cuando el elemento de la directiva se crea dentro del documento html. Esta función se puede utilizar por ejemplo para inicializar eventos u otras acciones únicas dentro de la directiva. En el ejemplo esta función muestra solamente un mensaje de consola.

  • Función unbind(). Es la contraria a bind. La función se ejecuta cuando el elemento que contiene la directiva es destruido. La función se utiliza por ejemplo para deshabilitar los eventos inicializados en la función bind. En el ejemplo esta función solamente muestra otro mensaje en consola.

  • Función update(newVal, oldVal). Esta función se ejecuta cada vez que el valor de la directiva cambia. En el ejemplo es la responsable de cambiar el atributo css color o background con el nuevo valor.

  • Propiedad this.el. Esta variable contiene la etiqueta html que contiene a la directiva. En este caso contiene el elemento html al cual vamos a cambiar su color de letra o de fondo.

  • Propiedad this.arg. Guarda el valor del argumento de la directiva. En este caso sirve para especificar que vamos a colores, el color de la letra o el del fondo de la etiqueta.

Estas son algunas de las funciones y propiedades que tiene una directiva. Aunque no son las únicas. Aquí podéis ver toda la información sobre las directivas.

Una vez creada la directiva, para utilizarla en el código html:

utilizar directiva en código html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="app">
<!-- Cambiar el color de la letra -->
<div v-color="color1">
Hello world!!!
</div>

<!-- cambiar el color de fondo -->
<div v-color:background="color2">
Hello world!!!
</div>
</div>

En el ejemplo se añade el atributo v-color a las etiquetas div, para cambiar el color de su interior.

Nota

Todas las directivas creadas deben empezar con el prefijo v-

color1 y color2 Son datos de vuejs que deben contener cadenas de texto con los colores. En la segunda directiva v-color:background. Lo que viene después de : se conoce como argumento. Este valor queda almacenado en la variable javascript this.arg dentro del objeto directiva. En este caso sirve para definir que queremos colorear. Si no se especifica el argumento cambiamos el color de las letras. Si se especifica el argumento background. Cambiamos el color del fondo.

Este solo es un ejemplo de como crear directivas en vuejs, no aporta utilidad en una página web real, pero nos muestra una pequeña introducción del concepto directiva. Podéis ver el ejemplo completo y funcionando aquí

Comentarios