當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue006_事件处理

發(fā)布時(shí)間：2024/2/28 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue006_事件处理小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? 綁定監(jiān)聽:

1) v-on:xxx="fun"
2) @xxx="fun"
3) @xxx="fun(參數(shù))"
4) 默認(rèn)事件形參: event
5) 隱含屬性對(duì)象: $event

? 事件修飾符

1) .prevent : 阻止事件的默認(rèn)行為 event.preventDefault()
2) .stop : 停止事件冒泡 event.stopPropagation()

? 按鍵修飾符

1) .keycode : 操作的是某個(gè) keycode 值的鍵
2) .keyName : 操作的某個(gè)按鍵名的鍵(少部分)

代碼示例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="example"><h2>1. 綁定監(jiān)聽</h2><button v-on:click="test1">Greet</button><button @click="test1">Greet2</button><button @click="test2($event, 'hello')">Greet3</button><h2>2. 事件修飾符</h2><a href="http://www.baidu.com" @click.prevent="test3">百度一下</a><br /><br /><div style="width: 200px;height: 200px;background: red" @click="test4"><div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div></div><h2>3. 按鍵修飾符</h2><input @keyup.8="test6"><input @keyup.enter="test6"></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">new Vue({el: '#example',data: {name: 'Vue.js'},methods: {test1(event) {// 方法內(nèi) `this` 指向 vm// alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件alert(event.target.innerHTML)},test2(event, msg) {alert(event.target.innerHTML + '---' + msg)},test3() {alert(' 阻止事件的默認(rèn)行為')},test4() {alert('out')},test5() {alert('inner')},test6(event) {alert(event.keyCode + '------' + event.target.value)}}})</script></body> </html>

結(jié)果展示

總結(jié)

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

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

事件