08《Vue 入門教程》Vue 事件處理為什么大公司很少用vue。

本節我們介紹Vue如何處理事件？我們在章節2.2中介紹了指令v-on，本章將詳細介紹v-on一些用法。包括如何傳遞參數，如何使用事件修飾符等。其中，事件修改符是本章的難點。有許多事件修多，學生不需要一下子記住，只要學會了如何使用，如果在開發過程中被遺忘，可以通過閱讀文檔來使用。vue框架菜鳥教程ajax。

使用v-on指令監聽DOM事件在觸發時運行JavaScript代碼。

實例演示

“運行案例”可查看在線運行效果Vue.js。

代碼解釋:在html第三行，我們用v-on指令給button綁定一個元素click并在點擊時執行事件count 1的操作。

在上面的例子中，我們直接在模板中寫下事件處理函數，但許多事件處理的邏輯非常復雜，所以直接JS代碼寫在v-on有時指令不可行，v-on指令可以通過接收定義的方法來調用。

實例演示

“運行案例”可查看在線運行效果

代碼解釋:在html第三行，我們用v-on指令給button綁定一個元素click并在點擊時執行事件add方法。在JS我們定義了代碼9-11行的方法add；觸發此方法時給予count 1。

有時我們需要在事件觸發時傳遞一些參數，

實例演示

“運行案例”可查看在線運行效果

代碼解釋:在html第三行，我們用v-on指令給button一個元素被綁定click并在點擊時執行事件add方法。在JS我們定義了代碼9-11行的方法add；觸發此方法時給予count 1。vue3**官網。

有時我們需要訪問原始的內聯語句處理器DOM事件$event傳入方法：vue3官網中文文檔。

實例演示

“運行案例”可查看在線運行效果vue3實戰教程pdf。

代碼解釋:在上面JS代碼9-12行，我們定義了事件函數setCount。按鈕點擊事件時，我們將$event因此，在函數中setCount原始事件對象可以訪問。

調用事件處理程序event.preventDefault()或event.stopPropagation()是很常見的需求。雖然我們可以在方法中輕松實現這一點，但更好的方法是，方法只是純數據邏輯，而不是處理DOM事件細節。要解決這個問題，Vue.js為v-on提供事件修改符。實現方法是在事件名稱后面以后綴的形式添加指定的修飾符。

Vue提供以下事件修飾符：

接下來，讓我們用一個完整的例子來看看這些修飾符的使用方法。

實例演示

“運行案例”可查看在線運行效果vue編程式導航。

代碼解釋：代碼4-7行，stop在這種情況下，當我們給按鈕時click事件添加.stop點擊按鈕修改符后，事件不會向上傳遞。代碼第10-16行，submit.prevent在案例中，當給submit事件添加.prevent修改符后，提交事件不再重載頁面。代碼第19-21行，capture在這種情況下，我們添加了父容器capture點擊按鈕時，會先觸發事件capture點擊事件中的事件函數，然后觸發按鈕綁定。代碼第24-26行，self在這種情況下，我們添加了父容器點擊事件.self所以只有點擊父容器才會觸發修飾符，點擊按鈕時不會觸發父容器綁定事件。代碼第29-31行，once在這種情況下，我們添加了按鈕點擊事件.once修改符，所以只有**次點擊按鈕才會觸發事件函數，再次點擊后不會觸發事件函數。

在監控鍵盤事件時，我們經常需要檢查詳細的按鈕。Vue允許為v-on按鍵修飾符添加到監控鍵盤事件中：

必要時支持舊瀏覽器，Vue提供絕大多數常用按鍵碼的別名：

鼠標或鍵盤事件的監聽器只有在按下相應的按鈕時才能觸發。

注意：在Mac在系統鍵盤上，meta對應command鍵()。在Windows系統鍵盤meta對應Windows徽標鍵()。在Sun操作系統鍵盤，meta對應實心寶石鍵()。特別是在其他特定鍵盤上，MIT和Lisp機器鍵盤及其后繼產品，如Knight鍵盤、space-cadet鍵盤，meta被標記為“META”。在Symbolics鍵盤上，meta被標記為“META”或者“Meta”。Vue提供了.exact修改符，實現單獨的系統按鈕事件。本節，我們帶您學習事件處理。主要知識點如下：