
08《Vue 入門教程》Vue 事件處理為什么大公司很少用vue。
本節(jié)我們介紹Vue如何處理事件?我們?cè)谡鹿?jié)2.2中介紹了指令v-on,本章將詳細(xì)介紹v-on一些用法。包括如何傳遞參數(shù),如何使用事件修飾符等。其中,事件修改符是本章的難點(diǎn)。有許多事件修多,學(xué)生不需要一下子記住,只要學(xué)會(huì)了如何使用,如果在開(kāi)發(fā)過(guò)程中被遺忘,可以通過(guò)閱讀文檔來(lái)使用。vue框架菜鳥(niǎo)教程ajax。
使用v-on指令監(jiān)聽(tīng)DOM事件在觸發(fā)時(shí)運(yùn)行JavaScript代碼。
實(shí)例演示
“運(yùn)行案例”可查看在線運(yùn)行效果Vue.js。
代碼解釋:在html第三行,我們用v-on指令給button綁定一個(gè)元素click并在點(diǎn)擊時(shí)執(zhí)行事件count 1的操作。
在上面的例子中,我們直接在模板中寫(xiě)下事件處理函數(shù),但許多事件處理的邏輯非常復(fù)雜,所以直接JS代碼寫(xiě)在v-on有時(shí)指令不可行,v-on指令可以通過(guò)接收定義的方法來(lái)調(diào)用。
實(shí)例演示
“運(yùn)行案例”可查看在線運(yùn)行效果
代碼解釋:在html第三行,我們用v-on指令給button綁定一個(gè)元素click并在點(diǎn)擊時(shí)執(zhí)行事件add方法。在JS我們定義了代碼9-11行的方法add;觸發(fā)此方法時(shí)給予count 1。
有時(shí)我們需要在事件觸發(fā)時(shí)傳遞一些參數(shù),
實(shí)例演示
“運(yùn)行案例”可查看在線運(yùn)行效果
代碼解釋:在html第三行,我們用v-on指令給button一個(gè)元素被綁定click并在點(diǎn)擊時(shí)執(zhí)行事件add方法。在JS我們定義了代碼9-11行的方法add;觸發(fā)此方法時(shí)給予count 1。vue3**官網(wǎng)。
有時(shí)我們需要訪問(wèn)原始的內(nèi)聯(lián)語(yǔ)句處理器DOM事件$event傳入方法:vue3官網(wǎng)中文文檔。
實(shí)例演示

“運(yùn)行案例”可查看在線運(yùn)行效果vue3實(shí)戰(zhàn)教程pdf。
代碼解釋:在上面JS代碼9-12行,我們定義了事件函數(shù)setCount。按鈕點(diǎn)擊事件時(shí),我們將$event因此,在函數(shù)中setCount原始事件對(duì)象可以訪問(wèn)。
調(diào)用事件處理程序event.preventDefault()或event.stopPropagation()是很常見(jiàn)的需求。雖然我們可以在方法中輕松實(shí)現(xiàn)這一點(diǎn),但更好的方法是,方法只是純數(shù)據(jù)邏輯,而不是處理DOM事件細(xì)節(jié)。要解決這個(gè)問(wèn)題,Vue.js為v-on提供事件修改符。實(shí)現(xiàn)方法是在事件名稱后面以后綴的形式添加指定的修飾符。
Vue提供以下事件修飾符:
接下來(lái),讓我們用一個(gè)完整的例子來(lái)看看這些修飾符的使用方法。
實(shí)例演示
“運(yùn)行案例”可查看在線運(yùn)行效果vue編程式導(dǎo)航。
代碼解釋:代碼4-7行,stop在這種情況下,當(dāng)我們給按鈕時(shí)click事件添加.stop點(diǎn)擊按鈕修改符后,事件不會(huì)向上傳遞。代碼第10-16行,submit.prevent在案例中,當(dāng)給submit事件添加.prevent修改符后,提交事件不再重載頁(yè)面。代碼第19-21行,capture在這種情況下,我們添加了父容器capture點(diǎn)擊按鈕時(shí),會(huì)先觸發(fā)事件capture點(diǎn)擊事件中的事件函數(shù),然后觸發(fā)按鈕綁定。代碼第24-26行,self在這種情況下,我們添加了父容器點(diǎn)擊事件.self所以只有點(diǎn)擊父容器才會(huì)觸發(fā)修飾符,點(diǎn)擊按鈕時(shí)不會(huì)觸發(fā)父容器綁定事件。代碼第29-31行,once在這種情況下,我們添加了按鈕點(diǎn)擊事件.once修改符,所以只有**次點(diǎn)擊按鈕才會(huì)觸發(fā)事件函數(shù),再次點(diǎn)擊后不會(huì)觸發(fā)事件函數(shù)。
在監(jiān)控鍵盤(pán)事件時(shí),我們經(jīng)常需要檢查詳細(xì)的按鈕。Vue允許為v-on按鍵修飾符添加到監(jiān)控鍵盤(pán)事件中:
必要時(shí)支持舊瀏覽器,Vue提供絕大多數(shù)常用按鍵碼的別名:
鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器只有在按下相應(yīng)的按鈕時(shí)才能觸發(fā)。
注意:在Mac在系統(tǒng)鍵盤(pán)上,meta對(duì)應(yīng)command鍵()。在Windows系統(tǒng)鍵盤(pán)meta對(duì)應(yīng)Windows徽標(biāo)鍵()。在Sun操作系統(tǒng)鍵盤(pán),meta對(duì)應(yīng)實(shí)心寶石鍵()。特別是在其他特定鍵盤(pán)上,MIT和Lisp機(jī)器鍵盤(pán)及其后繼產(chǎn)品,如Knight鍵盤(pán)、space-cadet鍵盤(pán),meta被標(biāo)記為“META”。在Symbolics鍵盤(pán)上,meta被標(biāo)記為“META”或者“Meta”。Vue提供了.exact修改符,實(shí)現(xiàn)單獨(dú)的系統(tǒng)按鈕事件。本節(jié),我們帶您學(xué)習(xí)事件處理。主要知識(shí)點(diǎn)如下: