Vue.js 提供了事件處理機制，事件監聽使用v-on指令監聽DOM事件來觸發JavaScript代碼。
通常情況下需要編寫監聽事件、方法事件處理器、內聯處理器方法。
監聽事件
監聽事件直接把事件寫在v-on指令中
<div id="app">
<p>{{message}}</p>
<button @click="message=message+'.......YanH'">歡迎</button>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app",
data:{
message:'welcome'
}
})
</script>
方法事件處理器
使 v-on 接收一個定義的方法來調用。
<div id="app">
<p>{{message}}</p>
<button @click="com">歡迎</button>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app",
data:{
message:'welcome'
},
methods:{
com:function(){
alert("computer!");
}
}
})
</script>
內聯事件處理器
如果需要傳遞參數，就需要內聯JavaScript 語句。這種方式稱爲內聯事件處理器。
<div id="app">
<button @click="one_say('welcome two')">歡迎</button>
<br />
<p>{{one}}</p>
<br/>
<p>{{two}}</p>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app",
data:{
one:'',
two:''
},
methods:{
one_say:function(message){
app1.one=message;
},
two_say:function(message){
app1.two=message;
}
}
})
</script>
在內聯語句處理器中可以用特殊的變量 $event 把它傳入方法，以此來訪問原生的 DOM 事件。
<button v-on:click="funName(vue,$enent)">點擊</button>
......
var app1=new Vue({
el:"#app",
methods:{
funName:function(msg,event){
event.preventDefault();
}
}
})
事件修飾符
.stop
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>.prevent
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
.capture
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>.self
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>注意：
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self會阻止所有的點擊，而v-on:click.self.prevent 只會阻止對元素自身的點擊。
.once
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>.passive
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>注意：
不要把 .passive 和 .prevent 一起使用，因爲 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。
按鍵修飾符
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit"><input v-on:keyup.page-down="onPageDown">按鍵碼
keyCode 的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持。
系統修飾鍵
在 Vue2.1.0 版本中增加一些修飾鍵。這些鍵實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。修飾鍵如下：
-
.ctrl
-
.alt
-
.hift
-
.meta
注意：
在 Mac 系統鍵盤上，meta對應 command 鍵 (⌘)。在 Windows 系統鍵盤meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操作系統鍵盤上，meta對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記爲“META”。在 Symbolics 鍵盤上，meta 被標記爲“META”或者“Meta”。
.exact 修飾符
.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>鼠標按鈕修飾
.left
.right
.middle
vue.js官網文檔：https://cn.vuejs.org/v2/guide/events.html
