Vue学习-5

v-on指令

事件绑定绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

v-on指令用法<input type = 'button' v-on:click='num++'/>

v-on指令简写<input type = 'button' @click='num++'/>

事件函数的调用方式

• 直接绑定函数名称<button v-on:click='say'>Hello</button>
• 调用函数<button v-on:click='say()'>Say hi</button>

事件函数参数传递

• 不带参数默认会传递事件对象作为事件函数的第一个参数<button v-on:click='say'>Say hi</button>
• 普通参数和事件对象<button v-on:click='say("hi",$event)'>Say hi</button>

事件修饰符

事件冒泡

事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

点击按钮竟然触发了handle0方法，从而使数值加1

默认行为

网页中的某些元素是有自己的默认行为的，比如超链接单击后需要跳转，提交按钮点击后需要提交表单，有时需要阻止这些行为，也就是默认行为。

• .stop阻止冒泡<a v-on:click.stop="handle">跳转</a>
• .prevent阻止默认行为<a v-on:click.prevent="handle">跳转</a>

除了通过修饰符来阻止事件冒泡和默认行为，也可以通过事件对象

• 阻止冒泡event.stopPropagation();
• 阻止默认行为event.preventDefault();

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

• .enter 回车键<input v-on:keyup.enter='submit'>
• .esc 退出键<input v-on:keyup.delete='handle'>
• 

自定义按键修饰符

全局 config.keyCodes 对象Vue.config.keyCodes.f1 = 112

自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

自定义按键修饰符