8. 事件處理
阿新 • • 發佈:2020-08-16
繫結監聽
- v-on:xxx="fun"
- @xxx="fun"
- @xxx="fun(引數)"
- 預設事件形參: event
- 隱含屬性物件: $event
事件修飾符
- .prevent : 阻止事件的預設行為 event.preventDefault()
- .stop : 停止事件冒泡 event.stopPropagation()
按鍵修飾符
- .keycode : 操作的是某個 keycode 值的鍵
- .keyName : 操作的某個按鍵名的鍵(少部分)
編碼
<div id="example"> <h2>1. 繫結監聽</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) { // 方法內 `this` 指向 vm // alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.innerHTML) }, test2 (event, msg) { alert(event.target.innerHTML + '---' + msg) }, test3() { alert('阻止事件的預設行為') }, test4() { alert('out') }, test5() { alert('inner') }, test6(event) { alert(event.keyCode + '---' + event.target.value) } } }) </script>