Vue入门教程08-事件处理

一、v-on：事件监听指令：

使用 v-on 指令可以监听事件：

<template>
  <div id="hello">
    <button v-on:click="sayHello($event,'Jay')">Hello</button>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    methods:{
      sayHello:function (event,val) {
        alert(val);
        if(event){
          alert(event.target.tagName);
        }
      }
    }
  }
</script>

在上程序中，传入了两个参数：$event是固定写法，表示事件对象，第二个是业务值参数（如果是有参调用方式，要传入事件必须使用$event是固定写法，当然用不到事件对象的时候，可以只传入其他数据参数）。
如果使用下面无参调用方式，则sayHello:function 内默认只接受一个event事件对象参数：

<button v-on:click="sayHello">Hello</button>

sayHello:function (event) {
   if(event){
     alert(event.target.tagName);
   }
 }

二、事件修饰符：

事件点(.)表示的指令后缀来调用修饰符，常用修饰符：

.stop  阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent  阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.capture  改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.self  只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.once  将事件设置为只执行一次
.passive  滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成，尤其能够提升移动端的性能。

修饰符使用样例：

// 阻止单击事件冒泡 
<a v-on:click.stop="sayHello"></a>
// 提交事件不再重载页面 
<form v-on:submit.prevent="sayHello"></form>
// 修饰符可以串联使用
<a v-on:click.stop.prevent="sayHello"></a>
// 只有修饰符 
<form v-on:submit.prevent></form>
// 添加事件侦听器时使用事件捕获模式 
<div v-on:click.capture="sayHello">...</div>
// 只当事件在该元素本身（而不是子元素）触发时触发回调 
<div v-on:click.self="sayHello">...</div>
// click 事件只能点击一次
<a v-on:click.once="sayHello"></a>

三、按键修饰符：

可以指定按键事件监听那个键盘位：

<input v-on:keyup.14="submit">
<input v-on:keyup.tab="submit">

不建议使用数字代号，每个按键都有对应的别名如下：

.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

END.