說說 Vue.js 中的 v-on 事件指令
摘要：
v-on 事件指令用於繫結事件。
1 基礎用法
v-on 指令繫結事件後，就會監聽相應的事件。
html：
<div id="app">
<h3>已點選 {{count}} 次</h3>
&...
v-on 事件指令用於繫結事件。
1 基礎用法
v-on 指令繫結事件後，就會監聽相應的事件。
html：
<div id="app">
<h3>已點選 {{count}} 次</h3>
<button @click="count++">點我</button>
</div>
注意： @click 是 v-on:click 的簡寫形式， @ 即表示 v-on: 。
js：
<script> var app = new Vue({ el: '#app', data: { count:0 } }); </script>
效果：
@click 表示式即可以直接使用 js 語句，也可以是一個定義在 vue 例項中 methods 內的函式名。
html：
<button @click="quickAdd(3)">快速增長</button>
js：
methods: {
quickAdd: function (i) {
i = i || 1;//為避免參數為 null 或 undefined 值，這裡設定了預設值 1
this.count += i;
}
}
效果：
注意： @click 呼叫的方法名如果不需要引數，那麼可以不寫括號。
使用 Vue.js 的一個好處是：當銷燬 ViewModel 時，會自動銷燬所有繫結在其上的事件處理器。
2 呼叫 DOM 事件
Vue.js 還提供了一個 $event 變數，使用它可以訪問原生 DOM 事件。 $event 變數可以通過方法傳入。
html：
<div id="app2">
<a href="www.163.com" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
count: 0
},
methods: {
openUrl: function (param, event) {
event.preventDefault();
console.log("param:" + param);
}
}
});
輸出結果：
param:被禁用咯
這個示例利用傳入的 event 引數，禁用了原有的連結跳轉邏輯。
3 事件修飾符
Vue.js 支援以下事件修飾符：
| 事件修飾符 | 示例 | 示例說明 |
|---|---|---|
.stop |
@click.stop |
阻止單擊事件冒泡。 |
.prevent |
@submit.prevent |
提交頁面不再過載頁面。 |
.capture |
@click.capture |
新增事件監聽器時使用事件捕獲模式。 |
.self |
@click.self |
只有當單擊事件是元素的自身事件時，才會觸發。 |
.once |
@click.once |
只觸發一次。 |
4 按鍵修飾符
可以使用按鍵修飾符，來監聽表單元素上的鍵盤事件。
html：
<div id="app3"> <input @keyup.13="enterClick"> </div>
js：
var app3 = new Vue({
el: '#app3',
data: {},
methods: {
enterClick: function () {
console.log("enterClick");
}
}
});
輸出結果：
enterClick
這個示例演示瞭如何通過回車按鍵修飾符來繫結事件函式的過程。
除了使用 keycode 來指定按鍵之外，我們還可以使用以下這些按鍵別名：
.enter .tab .delete .esc .space .up .down .left .right
還有一些按鍵修飾符可以組合使用，或者和滑鼠一起使用：
.ctrl .alt .shift .meta
html：
<div id="app4"> <input @keyup.alt.83="save"> </div>
js：
var app4 = new Vue({
el: '#app4',
data: {},
methods: {
save: function () {
console.log("save");
}
}
});
輸出結果：
save
這個示例，我們通過組合按鍵修飾符，為輸入框綁定了 alt + S 事件。
本文示例（ ofollow,noindex">DEMO ）