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].
Componente
COMPONENTE
IMPORTANTE
La nomenclatura del componente es importante, debe ser de tipo camel-case “MiComponente” o kebab-case “mi-componente”, en definitiva, una forma de unir palabras.
Los componentes en Vue son unos contenedores donde implementamos lógica para que funcionen de manera aislada y puedan ser reutilizados por la aplicación.
Creemos un componente donde, al escribir una palabra, se muestre su traducción si existe en el diccionario.
Al usar CDN en lugar del CLI, para definir un componente, usamos “Vue.component”, cuyo primer parámetro es el nombre del componente.
Creamos la página html, que incluye la librería de vue, el css y el contenedor de la aplicación, donde incluimos la etiqueta del componente a crear, “<my-translator />” [1].
Además, creamos el fichero “firstvue.css”, con un estilo para agrandar los elementos de tipo texto [2].
Definimos el componente, en el fichero “firstvue.js” [3]. Nombramos al componente como “my-translator”.
let Translator = Vue.component(‘my-translator’, { })
En la propiedad “template”, definimos su plantilla, mediante “template literal”, comillas “`” usadas a principio y fin del html de la plantilla, para visualizarla en varias líneas. Definimos una caja de texto, que representa la palabra “word”, que el usuario escribe para buscar su traducción. Mediante “v-model” vinculamos el input con el modelo.
Incluimos un botón para limpiar el valor del input al pulsarlo, así como las sugerencias que la propiedad computada “AnyMatch”, nos retorna.
En la propiedad “data” incluimos las variables, “placeholderWord”, texto en el placeholder del input, “word” y “dictionary”, que contiene una lista de palabras con sus traducciones entre castellano “ES” e inglés “EN”.
En la propiedad “computed” añadimos la propiedad computada “AnyMatch” que recorre el diccionario y compara cada palabra, de modo que si el valor contiene la palabra “word”, la añade a un array retornado por la función.
En la propiedad “methods” definimos el método “clear”, para vaciar el input al pulsar el botón “limpiar”.
Tras definir el componente, lo añadimos a la instancia de la aplicación, en la propiedad “components”, mediante kebab-case.
const app = new Vue({ el: ‘#app’, components: { ‘my-translator’: Translator } });
Abrimos en el navegador el html, visualizamos el componente, tras introducir letras en la caja de texto, deberían aparecer las sugerencias de traducción [4]. Si pulsamos el botón limpiar, se vacía el contenido del input [5] y las sugerencias.
Componente parametrizables
REUTILIZABLES
IMPORTANTE
Los componentes en entorno CDN se declaran como Vue.component, sin embargo su definición varía en entornos CLI, que veremos más adelante.
Los componentes pueden reutilizarse múltiples veces y parametrizarse para condicionar su comportamiento. Realicemos unas modificaciones en el ejercicio anterior para crear dos instancias del mismo componente y que su comportamiento sea diferente en base a un parámetro recibido en las props.
Para ello, el html incluye dos componentes del mismo tipo “my-translator” [1], el primero para traducciones de castellano, indicado mediante la propiedad “prop-language” con el valor “ES”, y el segundo para traducciones de inglés, con valor “EN”. La hoja de estilos “firstvue.css” será idéntica a la anterior [2].
La definición del componente [3] es idéntica al anterior, con algunas variaciones. En la sección de la plantilla, comprobamos el valor de la propiedad “propLanguage”, proporcionada en las props al componente, de modo que, dependiendo del idioma, mostraremos un texto u otro como título, mediante un condicional “v-if”. Este mismo condicional entrará en juego a la hora de mostrar las sugerencias recorridas con el “v-for”.
La sección del data no varía. Sin embargo, la sección de las propiedades computadas, en lugar de establecer por defecto el idioma “ES” lo hacemos dinámico mediante la prop.
this.dictionary.map( (w)=> {if(this.word != ‘’ &&
w[this.propLanguage].toLowerCase().includes(this.word.toLowerCase()) ) words.push(w) })
Tanto tiempo hablando de “propLanguage” y no la habíamos definido; podemos ver cómo una propiedad puede influir en el comportamiento de nuestro componente. Definamos esta propiedad, estableciendo su tipo a texto mediante “type” y su valor por defecto “ES”, es decir, en caso de no indicar la propiedad, tomará este valor.
,props:{ propLanguage: {type:String,default:’ES’} }
Si abrimos el html en el navegador aparecen dos componentes, su título condicionado por el valor del idioma proporcionado a cada componente. Si escribimos en el componente de castellano, sugerirá palabras de castellano a inglés [4], si lo hacemos en el componente de inglés será al revés. Finalmente, una vez queramos borrar el contenido de sugerencias y la palabra, pulsaremos el botón “limpiar” del componente que deseemos vaciar [5], observando un comportamiento aislado entre componentes.
Componente Tipo Propiedades
TIPOS