Vue.js 是一款非常流行的前端框架，它可以幫助開發(fā)者輕松創(chuàng)建交互式和動態(tài)的 web 應(yīng)用程序。在 Vue.js 中，獲取用戶鼠標(biāo)或手指的坐標(biāo)是一項(xiàng)非常基礎(chǔ)的操作。下面我們就來探討一下如何在 Vue.js 中獲取坐標(biāo)。

我們可以使用 Vue.js 提供的事件修飾符來獲取鼠標(biāo)或手指的坐標(biāo)。下面的代碼演示了如何通過 @mousemove 事件獲取鼠標(biāo)坐標(biāo)：

<template>
<div @mousemove="getMousePosition">
<p>{{ x }}, {{ y }}</p>
</div>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0
}
},
methods: {
getMousePosition(event) {
this.x = event.clientX
this.y = event.clientY
}
}
}
</script>

在上面的代碼中，我們在<div>元素上綁定了 @mousemove 事件，并傳遞了一個名為 getMousePosition 的方法。當(dāng)用戶鼠標(biāo)移動時，Vue.js 會自動調(diào)用該方法，并將事件對象作為參數(shù)傳遞給方法。我們通過訪問事件對象的 clientX 和 clientY 屬性來獲取鼠標(biāo)坐標(biāo)，并將其存儲在 Vue 實(shí)例的 data 屬性中。在模板中，我們使用雙花括號語法將 x 和 y 的值顯示在<p>元素中。

如果我們要獲取手指的位置，可以使用 @touchmove 事件。下面的代碼演示了如何獲取手指坐標(biāo)：

<template>
<div @touchmove="getTouchPosition">
<p>{{ x }}, {{ y }}</p>
</div>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0
}
},
methods: {
getTouchPosition(event) {
this.x = event.touches[0].clientX
this.y = event.touches[0].clientY
}
}
}
</script>

在上面的代碼中，我們在<div>元素上綁定了 @touchmove 事件，并傳遞了一個名為 getTouchPosition 的方法。當(dāng)用戶觸摸屏幕移動手指時，Vue.js 會自動調(diào)用該方法，并將事件對象作為參數(shù)傳遞給方法。我們通過訪問事件對象的 touches 數(shù)組來獲取手指的位置，然后將其存儲在 Vue 實(shí)例的 data 屬性中。同樣地，在模板中，我們使用雙花括號語法將 x 和 y 的值顯示在<p>元素中。