vue2.0獲取鼠標(biāo)位置的方法
更新時間：2018年09月13日 15:22:17 作者：Hi毛哥哥
今天小編就為大家分享一篇vue2.0獲取鼠標(biāo)位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
#canvas{
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
border: 1px solid #E5E5E5;
margin: 0 auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="app">
<div id='canvas' @mousemove='updateXY'>
{{x}} {{y}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
x:0,
y:0
},
methods:{
updateXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY
}
}
})
</script>
</body>
</html>
以上這篇vue2.0獲取鼠標(biāo)位置的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue.js使用v-model實現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實現(xiàn)父子組件間的雙向通信,結(jié)合實例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
在?Vue?中，命名規(guī)范是一個非常重要的話題，駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點和適用場景，開發(fā)者需要根據(jù)實際情況進行選擇，這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下2023-05-05
vue-element-admin后臺生成動態(tài)路由及菜單方法詳解
vue-element-admin后臺管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺生成動態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
在本文中我們給大家整理了關(guān)于Vue項目服務(wù)器部署之子目錄部署方法和具體步驟，需要的朋友們參考下。2019-05-05
SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
uniapp小程序上傳文件webapi后端項目asp.net完整代碼
在uniapp中,實現(xiàn)文件上傳功能也變得非常簡單,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序上傳文件webapi后端項目asp.net的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue2實現(xiàn)可復(fù)用的輪播圖carousel組件詳解
這篇文章主要為大家詳細(xì)介紹了vue2實現(xiàn)可復(fù)用的輪播圖carousel組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家介紹了vue路由跳轉(zhuǎn)的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
Vue3.0利用vue-grid-layout插件實現(xiàn)拖拽布局
這篇文章主要介紹了Vue3.0利用vue-grid-layout插件實現(xiàn)拖拽布局，工作中難免遇到需要對頁面布局進行拖拽然后改變布局，保存布局，下面文章就圍繞Vue3.0利用vue-grid-layout插件實現(xiàn)拖拽布局的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11