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)如下：