在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.js提供了Vue.extend(options)方法,建立基礎Vue構造器的「子類」,引數options物件和直接宣告Vue範例引數物件基本一致。
var Child = Vue.extend({ teplate:'#child', //不同的是,el和data選項需要通過函數返回值賦值,避免多個元件範例共用一個資料 data:function(){ return { ... } }, ... }) Vue.component('child',child) //全域性註冊子元件 <child ...></child> //子元件在其他元件內的呼叫方式
相關推薦:《》
以上就是vuejs事件監聽怎麼實現的詳細內容,更多請關注TW511.COM其它相關文章!