當前位置：首頁 > 前端技术 > vue >内容正文

vue

003_Vue事件

發布時間：2025/5/22 vue 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 003_Vue事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. Vue如何處理事件?

1.1. v-on指令用法

1.2. v-on簡寫形式

2. 事件函數的調用方式

2.1. 直接綁定函數名稱

2.2. 調用函數

3. 事件函數參數傳遞

3.1. 普通參數和事件對象

3.2. 如果事件直接綁定函數名稱, 那么默認會傳遞事件對象作為事件函數的第一個參數。

3.3. 如果事件綁定函數調用, 那么事件對象必須作為最后一個參數傳遞, 并且事件對象的名稱必須是$event。

4. 點擊事件案例

4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>點擊事件</title></head><body><div id="app"><div>{{num}}</div><div><button v-on:click="++num">點擊1</button><button @click="++num">點擊2</button><button @click="handle1">點擊3</button><button @click="handle1($event)">點擊4</button><button @click="handle2(500, $event)">點擊5</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {num: 0,},methods: {handle1: function(event){++this.num;console.log(event.target.innerHTML);},handle2: function(p, event){++this.num;this.num += p;console.log(event.target.innerHTML);}}});</script></body> </html>

4.2. 運行效果

4.3. 點擊1?

4.4. 點擊2?

4.5. 點擊3

4.6. 點擊4?

4.7. 點擊5?

9. 事件修飾符-阻止冒泡

9.1. .stop阻止冒泡。

9.2. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>事件-阻止冒泡.stop</title></head><body><div id="app"><div>{{num}}</div><div @click="handle1"><button @click.stop="handle2">點擊1</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {num: 0,},methods: {handle1: function(event){++this.num;console.log('handle1: ' + event.target.innerHTML);},handle2: function(event){console.log('handle2: ' + event.target.innerHTML);// js默認的阻止冒泡函數// event.stopPropagation();}}});</script></body> </html>

9.3. 運行效果

10. 事件修飾符-阻止默認行為

10.1. .prevent阻止默認行為

10.2. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>事件-阻止默認行為.prevent</title></head><body><div id="app"><a href="http://www.baidu.com" @click.prevent="handle1">百度</a></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {},methods: {handle1: function(event){// js默認的阻止默認行為函數// event.preventDefault();}}});</script></body> </html>

10.3. 運行效果, 點擊超鏈接不跳轉

總結

以上是生活随笔為你收集整理的003_Vue事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

事件
_vue