# 3、事件绑定 3.4 事件绑定 1. Vue如何处理事件? v-on指令用法 ~~~ <input type= 'button' v-on:click= 'num+ +'/> ~~~ ●v-on简写形式 ~~~ <input type= 'button' @click='num++'/> ~~~  ## 2.事件函数的调用方式 （js函数得定义在 methods 属性中） ●直接绑定函数名称 ~~~ <button v-on:click='say'>Hello</button> ~~~ ● 调用函数 ~~~ <button v-on:click='say() '>Say hi</button> ~~~  ## 3.事件函数参数传递 （固定 $event） ●普通参数和事件对象 ~~~ <button v-on:click=' say ("hi", $event) '>Say hi </button> ~~~ ~~~ 事件绑定-参数传递 1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event ~~~ ## 4.事件修饰符 ● .stop阻止冒泡、 ~~~ <a v-on:click. stop="handle">跳转</a> ~~~ ● .prevent阻止默认行为 ~~~ <a v-on: click. prevent="handle">跳转</a> ~~~ ## 5.按键修饰符 ● .enter 回车键 ~~~ <input v-on: keyup. enter= ' submit'> ~~~ ● .delete删除键 ~~~ <input v-on: keyup.delete= 'handle'> ~~~ 6.自定义按键修饰符 ● 全局config.keyCodes对象 ~~~ // 在js 代码里写 Vue.config.keyCodes.f1 = 112 ~~~ ~~~ <div id="app"> // 修改 <input type="text" v-on: keyup.aaa=' handle' v-model= ' info'> </div> <script type="text/javascript"> /* 事件绑定-自定义按键修饰符 规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值 */ Vue.config.keyCodes.aaa = 65 var Vm = new Vue({ el:#app', data: { info: ' '}, methods: { // 触发这个函数 在输入框 按 键盘的键 会显示出唯一标识 数字 handle: function(event){ console.log(event.keyCode) } } }); </script> ~~~