當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

發(fā)布時間：2023/11/27 生活经验 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 框架-02-事件：点击, 双击事件,鼠标移上事件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Vue 框架-02-事件：點擊, 雙擊事件,鼠標移上事件

1.單擊事件：v-on:click

源碼 app2.js ：

//實例化 vue 對象
new Vue({//注意代碼格式//el：element 需要獲取的元素，一定是 html 中的根容器元素el:"#vue-app",data:{name:"肖朋偉",age:18},//存儲自己的方法methods:{reduce: function(){this.age--;}}
});

源碼 html ：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="vue-app"><!--name 具體的值是在 js 中定義的--><h2>我今年 {{age}} 歲了！</h2><br />方法一：直接在頁面上進行自增<hr /><button v-on:click="age++">加一歲</button><br /><br />方法二：在 js 中實現(xiàn)減一歲<br /><hr /><button v-on:click="reduce">減一歲</button></div><!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執(zhí)行 vue 實例--><script type="text/javascript" src="js/app2.js" ></script></body>
</html>

2.雙擊事件：v-on:dblclick

雙擊事件：只有雙擊的時候，在 js 中實現(xiàn)減一歲
<br /><hr /><button v-on:dblclick="reduce">雙擊減一歲</button>

3.傳遞參數(shù)

app2.js：

//實例化 vue 對象
new Vue({//注意代碼格式//el：element 需要獲取的元素，一定是 html 中的根容器元素el:"#vue-app",data:{name:"肖朋偉",age:18},//存儲自己的方法methods:{reduce: function(){this.age--;},reduce2: function(year){this.age = this.age-year;},}
});

html ：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="vue-app"><!--name 具體的值是在 js 中定義的--><h2>我今年 {{age}} 歲了！</h2><br />方法一：直接在頁面上進行自增<hr /><button v-on:click="age++">加一歲</button><br /><br />方法二：在 js 中實現(xiàn)減一歲<br /><hr /><button v-on:click="reduce">減一歲</button><br /><br />雙擊事件：只有雙擊的時候，在 js 中實現(xiàn)減一歲<br /><hr /><button v-on:dblclick="reduce">雙擊減一歲</button><button v-on:click="reduce2(10)">減10歲</button><br /></div><!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執(zhí)行 vue 實例--><script type="text/javascript" src="js/app2.js" ></script></body>
</html>

4.鼠標移上事件：顯示鼠標位置

app2.js ：

//實例化 vue 對象
new Vue({//注意代碼格式//el：element 需要獲取的元素，一定是 html 中的根容器元素el:"#vue-app",data:{x:0,y:0,},//存儲自己的方法methods:{showXY:function(event){this.x = event.offsetX;this.y = event.offsetY;}}
});

html :

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="vue-app"><br />鼠標移上事件<hr /><div id="canvas" v-on:mousemove="showXY" style="border: 1px solid #eeaaaa;height: 200px;width: 300px;text-align: center;">當前鼠標位置（相對該div左上角）：<br> x:{{x}},y:{{y}}</div></div><!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執(zhí)行 vue 實例--><script type="text/javascript" src="js/app2.js" ></script></body>
</html>

提示：

html 中的

v-on:

可以直接用一個 @ 代替，例如：

<button @click="reduce">減一歲</button>

轉(zhuǎn)載于:https://www.cnblogs.com/xpwi/p/9923290.html

總結(jié)

以上是生活随笔為你收集整理的Vue 框架-02-事件：点击, 双击事件,鼠标移上事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。