3.6 事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on 简写为 @。
通过v-on绑定的事件处理函数，需要在methods节点中声明。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="add"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." }, methods: { //声明方法1 // add: function() { // alert('11111') // } // 或 //声明方法2 add() { alert('1111') } } }) </script> </body> </html>
3.6.1 事件对象
在原生的DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。在v-on指令所绑定的事件处理函数中，同样可以接收事件对象event。没有任何传参，会默认有一个事件对象。
获取产生事件的组件， 事件对象.target。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="add"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { //e为事件对象，没有任何传参，会默认有一个事件对象。 add(e) { this.num++; e.target.style.backgroundColor = "red"; } } }) </script> </body> </html>
点击了两次按钮
3.6.2 绑定事件并传参
在使用v-on指令绑定事件时，可以使用（）进行传参。
当有主动进行传参时，事件参数对象会被覆盖，所以vue提供了$event来表示原生的事件参数对象event，$event可以解决事件参数对象被覆盖的问题。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- add事件处理函数中传入参数 --> <input type="button" value="点击" v-on:click="add(10, $event)"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { //事件处理函数 add(a, e) { this.num+=a; e.target.style.backgroundColor = "red"; } } }) </script> </body> </html>
点击了一次按钮
3.6.3 事件修饰符
在事件处理函数中调用preventDefault()或 stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：
| 事件修饰符 | 说明 |
| .prevent | 阻止默认行为（例如:阻止a连接的跳转、阻止表单的提交等) |
| .stop | 阻止事件冒泡 |
| .capture | 以捕获模式触发当前的事件处理函数 |
| .once | 绑定的事件只触发1次 |
| .self | 只有在event.target是当前元素自身时触发事件处理函数 |
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 阻止默认的跳转行为 --> <a href="https://www.baidu.com/?tn=44004473_27_oem_dg" @click.prevent="add">baidu</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { add(e) { } } }) </script> </body> </html>
点击超链接不会跳转
3.6.4 按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：
<!-- 只有在按的键为enter时候调用submit方法 --> <input @keyup.enter="submit"> <!-- 只有在按的键为esc时候调用clear方法 --> <input @keyup.esc="clear">
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" @keyup.esc="clear"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', methods: { clear( e ) { e.target.value = '' } } }) </script> </body> </html>
按下esc键
