在vuejs中，可以使用「v-on」指令來實作事件監聽，該指令用來綁定事件監聽器；只需要在標籤範本中加入「v-on:事件參數="事件處理函數"」語句，使用JavaScript設定觸發時需要執行的程式碼即可。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
當模板渲染完成之後，就可以進行事件的綁定與監聽。 v-on指令用來監聽DOM事件，通常在範本內直接使用。
<button v-on:click="say">Say</button>
登入後複製
方法及內嵌語句處理器
#透過v-on綁定實力選項屬性methods中的方法作為事件的處理器，v-on：後參數接受所有的原生事件名稱。
<button v-on:click = "say">Say</button>
var vm = new Vue({
el: "#app",
data: {
msg:"hello vue.js"
},
methods:{
say:function(){
alert(this.msg);
}
}
})登入後複製
v-on縮寫形式：@。 @click="say"
v-on支援內嵌JavaScript語句，但僅限是一個語句。
<button v-on:click = "sayFrom('from param')">Say</button>
var vm = new Vue({
el: "#app",
data: {
msg:"hello vue.js"
},
methods:{
sayFrom:function(from){
alert(this.msg + '' + from);
}
}
})登入後複製
在直接綁定methods函數和內聯JavaScript與居室，都有可能需要獲取原生DOM事件對象
<button v-on:click = "showEvent">Event</button>
<button v-on:click = "showEvent($event)">event</button>
<button v-on:click = "showEvent()">Say</button> //这样写获取不到event
var vm = new Vue({
el: "#app",
methods:{
showEvent:function(event){
console.log(event);
}
}
})登入後複製
同一個元素上可以透過v-on綁定多個相同事件函數，執行順序為順序執行。
事件修飾符
1、.stop:呼叫event.stopPropagation().
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
登入後複製
2、.prevent :呼叫event.preventDefault().
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>登入後複製
3、.caputure:使用capture模式新增事件監聽器。
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>登入後複製
4、.self:只當事件是從監聽元素本身觸發時才觸發調回。
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>登入後複製
5、.once:
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>登入後複製
使用修飾符時，順序很重要；對應的程式碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊。
//例子
var vm = new Vue({
el: '#app',
methods:{
saySelf(msg) {
alert(msg);
}
}
});
//HTML代码
<div v-on:click="say('click from inner')" v-on:click.self="saySelf('click from self')">
<button v-on:click="saySelf('button click')">button</button>
<button v-on:click.stop="saySelf('just button click')">button</button>
</div>登入後複製
鍵值修飾符
在監聽鍵盤事件時，需要監控常見的鍵值。
<input v-on:keyup.13 = "submit" /> //监听input的输入，当输入回车时触发submit函数。
登入後複製
記住所有的keyCide比較困難，所以Vue為最常用的按鍵提供了別名。
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">登入後複製
.enter
.tab
.delete(捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
可以透過全域config.keyCodes物件自訂鍵值修飾符別名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112登入後複製
與傳統事件綁定的差異
1.無需手動管理事件。 ViewModel被銷毀時，所有的事件處理器都會自動被刪除，讓我們從取得DOM綁定事件然後在特定情況下再解脫這樣的事情中解脫出來。
2.解耦。 ViewModel程式碼是純粹的邏輯程式碼，和DOM無關，有利於我們寫自動化測試案例。
vue.extend()
為了重複使用的子元件，vue.js提供了Vue.extend(options)方法，建立基礎Vue建構器的“子類別”，參數options物件和直接聲明Vue實例參數物件基本上一致。
var Child = Vue.extend({
teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
data:function(){
return {
...
}
},
...
})
Vue.component('child',child) //全局注册子组件
<child ...></child> //子组件在其他组件内的调用方式登入後複製
相關推薦：《vue.js教學》
以上是vuejs事件監聽怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
