Vue事件修飾符的學習

2022-09-16 00:12:20 字數 917 閱讀 7983

在事件處理程式中呼叫 event.preventdefault() 或 event.stoppropagation()是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是:methods 只有純粹的資料邏輯,而不是去處理 dom 事件細節。在vue中,事件修飾符處理了許多dom事件的細節,讓我們不再需要花大量的時間去處理這些煩惱的事情,而能有更多的精力專注於程式的邏輯處理。在vue中事件修飾符主要有:

methods: ,

input()

}

在沒有使用.stop的時候,點選div的區域會在控制台輸出a,點選按鈕的時候會出現b和a(會從內到外觸發)。當我們加上.stop的時候相當於在方法中呼叫了event.stoppropagation(),這樣在點選子事件的時候不會觸發父節點事件。

}在沒有使用.capture的時候點選input控制台輸出的是b和a,使用.capture的時候點選input控制台輸出的是a和b。.capture的作用是點選子節點事件的時候,會從父節點依次向當前子節點事件執行

methods: ,

input() ,

div1()

}

.self只會觸發自己範圍內的事件,不會包含子元素,點選div1的時候只會出現b和a,不會出現子節點事件。點選按鈕的時候只會出現c和a,不會出現b事件

methods: 

}

使用.once修飾的只會執行一次,點選多次控制台也只會輸出第一次點選的

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

vue 事件修飾符

事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是 methods 只有純粹的資料邏輯,而不是去處理 dom 事件細節。為了解決這個問題,vue.js...

Vue事件修飾符

也可以只設定事件名和修飾符而不傳入偵聽器,而且可以將修飾符串聯起來使用。例如,下面這個例子會阻止單擊事件沿dom樹向下傳遞,但只在第一次觸發時有效 除了上述事件修飾符,還有一些按鍵修飾符。它們用在鍵盤事件上,只有在特定按鍵按下時才會觸發事件。看下面這個例子 上面這個例子中,if語句中的的 只有當ke...