Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 31
Directivas personalizadas IV DIRECTIVAS EN LA INSTANCIA
ОглавлениеHasta ahora hemos visto cómo crear y declarar nuestras directivas personalizadas de forma global pero en este ejercicio podremos ver cómo se definen de forma local dentro de una instancia o componente Vue.
Para ello simplemente tendremos que ir al código javascript de nuestra instancia y añadir un nuevo objeto directives con una sintaxis ligeramente diferente a la que hemos visto hasta ahora.
En este ejemplo condensaremos varias de las directivas de los ejercicios anteriores añadiéndolas en este apartado con sus correspondientes funciones.
En la declaración no cambia nada:
<h1 v-color:yellow v-format.bold.underline.highlight>{{message}}</h1>
Y el código JS quedaría de la siguiente forma:
directives: {
‘white’: {
bind(el, binding, vnode) {
el.style.color = ‘#fff’;
}
},
‘color’: {
bind(el, binding, vnode) {
el.style.color = binding.arg;
}
},
‘format’: {
bind(el, binding, vnode) {
const modifiers = binding.modifiers;
if (modifiers.underline) {
el.style.textDecoration = “underline”;
}
…
},
}
}
});
Tendríamos un resultado similar [1] al de ejercicios anteriores [2].
