Aprender VueJS con 100 ejercicios prácticos. Angel Vazquez Vazquez
Чтение книги онлайн.
Читать онлайн книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez страница 6
Estos métodos se declaran dentro de la instancia dentro del bloque methods, y se pueden asociar a los elementos HTML de la instancia.
En este ejercicio vamos a relacionar un componente de tipo botón con una acción que se corresponderá con un método declarado en la instancia Vue. Para indicar esta relación usamos la directiva v-on que se coloca dentro del HTML del botón y el evento (en este caso el evento de click).
<button type=”button” v-on:click=”showMessage”>Mostrar Título</button>
Una vez dado este paso creamos un bloque methods en la instancia y dentro de este creamos la función showMessage que concatenará la propiedad title a un texto.
methods: {
showMessage: function() {
console.log(‘Showing message: ‘+this.title + ‘ Aprendamos!’);
return this.title + ‘ Aprendamos!’;
}
}
Posteriormente declaramos dentro de una etiqueta h1 el método para renderizar el resultado de la función [1].
<h1>{{ showMessage() }}</h1>
Para volver a renderizar el resultado de la función accionamos el botón, si nos fijamos se calcula cada vez que salta el evento asociado al botón [2].
Componentes de la instancia
INSTANCIA VUE
Hasta ahora hemos estado jugando con la instancia de Vue, su ciclo de vida, el renderizado y el doble enlazado de propiedades, los métodos, etc., pero no nos hemos parado con los bloques básicos que tiene.
Una instancia se compone de:
• $el: es el objeto componente HTML al que estará asociado mediante el id correspondiente
• $data: es el objeto que contiene las propiedades de la instancia
• $refs: es el objeto donde se registran los elementos marcados con el atributo ref.
Para ilustrarlo en este ejercicio hemos creado una instancia de Vue con cada uno de los bloques mencionados a la que hemos añadido unas sentencias que imprimen por consola cada uno de estos elementos para que podamos ver su contenido cuando se carga la página.
El contenido de $el es efectivamente el objeto que contiene la definición del HTML de nuestra instancia. Si inspeccionamos el objeto accediendo a la propiedad innerHTML nos devuelve en formato texto el contenido en lenguaje HTML [1].
El contenido de $data nos devuelve el objecto con las variables como la de nuestro ejercicio la denominada message.
Podemos también invocar los métodos de nuestra instancia tal y como vemos en el ejercicio y nos ejecutará la función.
Dentro de $refs tenemos un objeto con los elementos marcados con el atributo ref en el HTML de nuestra instancia, en este caso son dos elementos h2 (mysubtitle y mysubtitle2).
Hemos añadido un botón que tiene asociado el método clickedButton y si lo accionamos se nos mostrarán dos mensajes en los elementos h2 referenciados. En este método accedemos a las propiedades de los componentes para añadirles un mensaje y un estilo que se hará visible en nuestra página una vez se ejecute [2].
Eventos
ESCUCHANDO EVENTOS
Podemos empezar a escuchar eventos añadiendo al input la directiva v-on seguido de que evento queremos escuchar para reaccionar invocando a un método concreto.
Hasta ahora hemos visto el doble enlazado de las propiedades de nuestra instancia, dentro del bloque data. Podemos declarar una propiedad que se renderiza en nuestra interfaz de usuario y declaramos un input que pueda modificarla mediante la directiva v-model [1].
De esta forma, cada vez que modifiquemos el contenido del input se modificará la propiedad y se renderizará inmediatamente. Sin embargo, ¿cómo haríamos si queremos que se modifique solamente cuando se finalice su edición? ¿Cuándo detectamos que se ha acabado la edición?
En este caso vamos a interpretar que se acaba de editar el valor cuando se pulsa la tecla Enter de nuestro teclado. Para ello tendremos que detectar esta pulsación y esto lo podemos conseguir con la directiva v-on diciendo que ejecutaremos una acción justo cuando se deje de presionar (modificador keyup) la tecla Enter (modificador .enter)
v-on:keyup.enter=”onEnterPressed”
De esta forma vemos que cuando dejamos de escribir y cuando soltamos la tecla Enter se ejecuta la acción que hemos definido, que no será otra que la de renderizar el contenido de la variable en la página [2].
Comprobamos además que solo se ejecuta en este caso como se puede ver en el log de la consola en la que se imprime un mensaje cuando se llama.
Escuchar eventos de teclado suele ser una práctica muy común para interceptar eventos según ocurran. Para invocar determinadas acciones, hemos probado el evento keyup. Además, podemos establecer un modificador concreto a invocar tras la captura del evento “haber pulsado una tecla”, por ejemplo, capturar una tecla en concreto, la tecla escape o incluso definir alias para las F del teclado. Esto último se realizaría mediante la configuración en Vue de los códigos de tecla: “Vue.config.keyCodes.f” [3].
Renderizar HTML
HTML EN UNA PROPIEDAD
En este ejercicio veremos cómo añadir código HTML para que sea renderizado dentro de nuestra instancia Vue.
En principio podríamos pensar que es algo muy sencillo, ¿no? Creamos una nueva instancia dentro de un elemento, una propiedad myhtml dentro del bloque data a la que asignamos una cadena con el formato de marcado HTML y la mostramos dentro de un bloque {{ myhtml }} [1].
¿Esto funcionaría? Bueno, la respuesta en este caso sería negativa ya que dentro de la instancia no se renderizaría nuestro código HTML si no como un simple texto. Esto es así para evitar una vulnerabilidad crítica en la web (XSS: cross site scripting) que pudiera permitir una modificación