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.