Vue學習筆記 6 事件修飾符

2022-07-20 07:54:07 字數 538 閱讀 3459

注意:1.once和prevent的先後順序不會影響結果

2.self和stop的區別

四個div從內層到外層分別為:div1~div4,各繫結乙個點選事件

當點選div2時,會發生事件冒泡,依次觸發了div2、div3、div4

stop阻止了(使用該修飾符的元素引發的)所有的冒泡行為。但不能阻止其內層元素冒泡造成的其事件觸發。

例子:為div2新增stop修飾符,當點選div2時,不再產生div2引起的事件冒泡行為,只觸發了div2;當點選div1時,div1會引發事件冒泡,導致div2的事件觸發,但是不再繼續冒泡,最終觸發了div1和div2。

self是阻止(冒泡到使用該修飾符的元素的本身的)冒泡行為。只有點選這個元素本身才會觸發這個元素繫結的事件,然後繼續向上冒泡。它內部元素的冒泡不會使它繫結的事件觸發,但會繼續往外冒泡。

例子:為div2新增self修飾符,當點選div2時,觸發了div2、div3、div4;當點選其內部的div1時,觸發了div1,viv3,div4。

Vue筆記 2 事件修飾符 按鍵修飾符

修飾符 作用用來和事件連用,用來決定事件觸發條件或者是阻止事件的觸發機制 1.事件修飾符 stop修飾符 用來阻止事件冒泡 事件冒泡 詳情 prevent 事件修飾符 用來阻止標籤的預設行為 self 事件修飾符 用來針對於當前標籤的事件觸發 只觸發自己標籤的上特定動作的事件 只關心自己標籤上觸發的...

vue修飾符與事件修飾符

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

vue 事件修飾符

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