vue事件修飾符包括.stop阻止冒泡，.prEvent阻止默認(rèn)行為，.once實現(xiàn)一次監(jiān)聽，.capture捕獲階段觸發(fā)，.passive優(yōu)化滾動性能，且可組合使用。例如@click.stop.prevent可同時阻止冒泡和默認(rèn)行為。
在 vue 開發(fā)中，事件修飾符是非常實用的小工具，它們能讓我們更輕松地處理 dom 事件的默認(rèn)行為和冒泡邏輯。常見的比如 .stop 和 .prevent，但其實還有更多修飾符可以幫助我們寫出更簡潔、清晰的代碼。
下面是一些常用的 Vue 事件修飾符及其用途：
阻止事件冒泡：.stop
當(dāng)你不希望一個事件向父元素繼續(xù)傳播時，就可以用 .stop。它等價于原生 JavaScript 中的 event.stopPropagation()。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
舉個例子：
<div @click="handleDiv"> <button @click.stop="handleButton">點我</button> </div>
點擊按鈕時，只會觸發(fā) handleButton 方法，不會觸發(fā)外層 div 的 handleDiv。這個修飾符在嵌套結(jié)構(gòu)里特別有用，可以避免不必要的干擾。
阻止默認(rèn)行為：.prevent
如果你需要阻止瀏覽器的默認(rèn)動作，比如表單提交或者鏈接跳轉(zhuǎn)，可以用 .prevent。這相當(dāng)于調(diào)用了 event.preventDefault()。
例如：
<a href="https://example.com" @click.prevent="doSomething">點擊</a>
點擊這個鏈接時，頁面不會跳轉(zhuǎn)，而是執(zhí)行你的 doSomething 方法。
一次性監(jiān)聽：.once
有時候你希望某個事件只被觸發(fā)一次，之后就不再響應(yīng)了，這時候 .once 就派上用場了。
比如：
<button @click.once="initializeData">初始化</button>
不管用戶點了幾次這個按鈕，initializeData 只會執(zhí)行一次。這對于加載數(shù)據(jù)或初始化操作很有用。
捕獲階段監(jiān)聽：.capture
默認(rèn)情況下，Vue 的事件監(jiān)聽器是在冒泡階段觸發(fā)的。但如果你希望在捕獲階段就處理事件，可以加上 .capture。
示例：
<div @click.capture="handleCapture"> <button @click="handleButton">按鈕</button> </div>
點擊按鈕時，會先觸發(fā)外層 div 的 handleCapture，然后再是按鈕本身的事件。
自動添加 passive：.passive
這個修飾符用于提升滾動性能，特別是在移動端。它告訴瀏覽器該事件監(jiān)聽器不會阻止默認(rèn)行為，從而讓滾動更流暢。
比如：
<div @touchstart.passive="handleTouchStart"></div>
需要注意的是，.prevent 和 .passive 不能同時使用，因為 .passive 明確表示不會調(diào)用 preventDefault()。
修飾符組合使用
這些修飾符還可以連著寫，順序一般不影響結(jié)果。比如：
<form @submit.prevent.stop="handleSubmit"></form>
這樣就能同時阻止默認(rèn)提交行為和事件冒泡。
基本上就這些常用的事件修飾符了，雖然看起來不多，但在實際開發(fā)中非常實用，尤其是能幫你省掉很多手動調(diào)用 event 方法的代碼。合理使用它們可以讓代碼更干凈，邏輯也更清晰。
.png)
