在 Vue 中,修飾符是在事件處理程序后面使用的特殊后綴,用于修改事件行為的方式。Vue 中的事件修飾符可以簡化事件處理程序的代碼,增加事件的可讀性和可維護性。
Vue 2.x 支持的事件修飾符包括:
.stop:阻止事件繼續傳播
.prevent:阻止默認行為
.capture:添加事件偵聽器時使用事件捕獲模式
.self:只當事件在該元素本身(比如不是子元素)觸發時觸發回調
.once:只觸發一次回調
.passive:提升移動端性能,告訴瀏覽器不要阻止默認行為(比如滾動)
除了以上修飾符外,Vue 3.x 中還引入了一些新的事件修飾符,包括:
.stopPropagation:阻止事件繼續傳播
.preventDefault:阻止默認行為
.capture:添加事件偵聽器時使用事件捕獲模式
.self:只當事件在該元素本身(比如不是子元素)觸發時觸發回調
.once:只觸發一次回調
.passive:提升移動端性能,告訴瀏覽器不要阻止默認行為(比如滾動)
.shift:只在按下 Shift 鍵的情況下觸發事件回調
.ctrl:只在按下 Ctrl 鍵的情況下觸發事件回調
.alt:只在按下 Alt 鍵的情況下觸發事件回調
.meta:只在按下 Meta 鍵的情況下觸發事件回調
使用事件修飾符時,只需要在事件名稱后面加上修飾符即可。例如,阻止事件繼續傳播可以這樣寫:
<button @click.stop>阻止事件冒泡</button>
需要注意的是,修飾符的順序很重要,不同的順序可能會導致不同的行為。例如, 修飾符應該放在前面, 修飾符應該放在后面,否則可能會阻止不了事件的默認行為。
相關文章
關注千鋒學習站小程序
隨時隨地免費學習課程
掃一掃快速進入
千鋒移動端頁面
掃碼匿名提建議
直達CEO信箱