1. 程式人生 > >vue的事件綁定

vue的事件綁定

listener off cal lis 指令 eve 事件綁定 委托 利用

vue事件有兩方面內容:DOM事件 和 自定義事件。

DOM事件
vue中采用DOM2級事件的處理方式,為IE9以上的瀏覽器服務。下面我們先來講解一下什麽是DOM2級事件吧!

JS中DOM0級事件有兩種:標簽內綁定事件 和 js中綁定事件;

沒有DOM1級事件:因為1級DOM標準中沒有定義與事件相關的內容;

DOM2級事件:只有一種監聽方法 addEventListener(事件名,func,false冒泡階段調用)/removeEventListener()。
DOM2級事件包含三個事件:事件捕獲階段、目標階段、事件冒泡階段。

vue綁定事件

1.通過指令 v-on:事件名=“函數名”綁定事件 eg:<button v-on:click="doThis"></button>
2.通過語法 @事件名=“函數名”綁定事件 eg:<button @click.stop="doThis"></button>

vue解綁事件

通過修飾符修飾事件後,vue再去解綁事件只是解綁了修飾之前的事件,所以解綁最終是失敗的。
我們可以合理的運用委托事件來解決大部分事件綁定引起的性能問題。

vue自定義事件

vue自定義事件是為組件間的通信設計,有$on、$off、$once、$emit觸發事件、$brodcast事件廣播、$dispath派發事件幾個API。

每個vue實例都有兩個私有變量:vm._events存儲所有自定義事件
vm._eventsCount存儲事件廣播後,子組件觸發自定義事件的數量。

vm.$on(event,callback):監聽當前實例上的自定義事件;
vm.$once(event,callback):監聽當前實例上的一個自定義事件,觸發後立即移除事件;
vm.$off(event,callback):移除當前實例上的自定義事件監聽器;
vm.$emit(event,[...args]):觸發當前實例上的自定義事件;

vue2.0中已經廢棄$brodcast和$dispath事件,利用props+emit或者vuex代替。

vue的事件綁定