v-on 介紹

在瀏覽網頁時會觸發很多事件 (events) 的發生，這些動作稱為JavaScript DOM Event
熟悉的Jquery會用.on( events [, selector ] [, data ], handler )去監聽並處理事件
而v-on也會監聽DOM事件，並在事件被觸發後，執行後續的項目。

v-on 縮寫

前一篇說v-bind有縮寫，v-on也不惶多讓!

縮寫前
<a v-on:click="myFunction()"></a>
縮寫
<a @click="myFunction()"></a>

事件修飾符 (Event Modifiers)

Vue 提供一些常用處理的修飾符，幫助處理了許多 DOM 裡面的事件傳遞機制，讓我們能專注於程式邏輯的開發!

修飾符語法：
v-on:事件.修飾符="function名稱"
E.G.
v-on:click.prevent="handleClick"

.stop : 停止觸發上層 DOM 元素事件(中止由內向外傳播)，防止事件冒泡 [event.stopPropagation()]
.prevent : 避免瀏覽器預設行為 [event.preventDefault()]
.capture : 事件捕捉模式 (事件觸發會先經由DOM tree一路往子層到目標為止，之後再冒泡上去父層)
.self : 僅觸發自己範圍的事件，不包含子層
.once : 事件觸發一次

接著來用v-on監聽並處理click、change、keyup事件吧!

click事件

點擊按鈕顯示遞增後的數字

<div id="app">
  <input type="button" id="add" value="加一" @click="add()">
	點了幾次:{{ count }}
</div>

let app = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        add() {
            this.count++
        }
    }
});

在按鈕設置click事件並監聽，在點擊按鈕後，會觸發執行add()，因此數值會遞增!
觸發監聽事件不一定要使用function()，可以放運算式~ [不過還是建議使用function()]

直接將運算式寫進click事件中

<div id="app">
  <input type="button" id="add" value="遞減" @click="count++">
	count:{{ count }}
</div>

change事件

使用下拉式選單，顯示選到哪個值

<div id="app">
    <select v-model="name" id="nameList" @change="changeName()">
        <option value="Peter">選項peter</option>
        <option value="Jack">選項jack</option>
        <option value="Mary">選項mary</option>
    </select>
    {{ text }}
</div>

let app = new Vue({
    el: '#app',
    data: {
        name: '',
        text: ''
    },
    methods: {
        changeName(){
            this.text = '姓名:' + this.name
        }
    }
});

在下拉選單設置change事件並監聽，當下拉式選單選擇改變時，會觸發執行changeName()

當我選擇 - 選項peter後，render的結果:
姓名:Peter

keyup事件

文字框按下enter後，顯示輸入的文字

<div id="app">
    <input type="text" v-model="text" @keyup="keySomething()">
</div>

let app = new Vue({
    el: '#app',
    data: {
        showText: ''
    },
    methods: {
        keySomething(event) {
          if(event.keyCode == 13){
            alert('輸入的文字為' + this.showText)
          }
        }
    }
});

在輸入框設置"按下鍵盤"後的事件並監聽，當我輸入文字觸發事件，會執行keySomething()，因此會得到alert訊息。

下一篇介紹v-model，一個結合v-bind與v-on的那個拉風指令，敬請觀看!

Resource
事件傳遞機制
v-on-事件監聽