Vue.Js Mouse Kordinatlarını Alma

Sezai AlkanFrontend Developer

Vue.js #vue-js

Vue.Js de ana divimizde veya ana divimizin içersindeki herhangi bir nesnenin üzerindeyken mouse un kordinatlarını veya mouse takibini mousemove özelliği ile yapabiliyoruz.

<div id="status">
    <span v-on:mousemove="cordinat" class="kutu">X : {{ x }} Y : {{ y }}</span>
</div>

status ana divimizin altındaki span etiketine daha iyi anlaşılır olması için kutu class ı ile yükseklik ve genişlik verdim. v-on:mousemove ile mouse un nesne üzerine gelince takibini yapıyoruz. istersek 

<span @mousemove="cordinat" class="kutu">X : {{ x }} Y : {{ y }}</span>

v-on:mousemove yerine @mousemove şeklinde daha kısa ve anlaşılır halini kullanabiliriz.

<script type="text/javascript">
    new Vue({
        el : '#status',
        data : {
            x : 0,
            y : 0
        },
        methods : {
            cordinat : function (){
                this.x = event.clientX;
                this.y = event.clientY;
            }
        }
    });
</script>

Mouse tabikini cordinat fonkisyonumuzun içersinde x ve y değişkenlerine event.clientX ve event.clientY Yardımıyla nesne üzerinde mouse hareket ettiği takdirde verecektir.

.kutu Class

<style type="text/css">
        .kutu {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
</style>