Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 27

En esta ocasión vamos a ver dentro de las directivas para capturar eventos del DOM aquella que nos permite filtrar los generados cuando el ratón se mueve por encima de uno de nuestros componentes.

Estamos hablando de la directiva v-on acompañado del evento mousemove [1]:

<div class=”mousearea” v-on:mousemove=”move”></div>

A este div le daremos unas dimensiones mediante la clase CSS mousearea [2]:

.mousearea {

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

}

Enlazaremos el evento con una función de la instancia para ir modificando las coordenadas mientras el ratón está en movimiento. Estas coordenadas las guardaremos y las mostraremos en otro div diferente como resultado.

methods: {

move:function(event){

this.mouseX = event.clientX;

this.mouseY = event.clientY;

}

}

<div class=”result”>{{mouseX}} - {{mouseY}}</div>

A medida que se captura el movimiento del ratón se ejecuta la función y vamos refrescando las variables de la instancia que se renderizarán en nuestra página [3].