Vue事件修飾符詳解

2022-01-29 06:30:14 字數 1345 閱讀 6262

整體學習vue時看到vue文件中有事件修飾符的描述,但是看了之後並沒有理解是什麼意思,於是查閱了資料,現在記錄下來與大家分享

先給大家畫乙個示意圖理解一下冒泡和捕獲

請看如下**

測試

由以上**可以看到我們有乙個巢狀的div,每乙個div都繫結著乙個事件,如果我們點選div的話是按什麼順序觸發這兩個事件的呢。其實是預設按照冒泡的方式觸發的,簡單來說就是由內而外,如果還是不明白請看上面的解析圖。

此vue檔案最終生成的介面是這個樣子的

當我們點選的時候預設按照冒泡方式觸發函式,控制台列印結果如下

現在就是.stop發揮作用的時候了,修改**如下

測試

這樣我們在點選之後控制台列印結果如下

由這個結果我們可以看到,這個修飾符的作用就是阻止事件冒泡,不讓他向外去執行函式,到此為止

這個時候我們再來說一下.prevent修飾符,其作用就是阻止元件本來應該發生的事件,轉而去執行自己定義的事件

跳轉

上述**我們並沒有新增.prevent修飾符,接下來的結果我們應該可以想到,點選之後會跳轉到我寫的**中(也就是我的部落格
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...