vue修飾符學習

2022-06-06 09:45:12 字數 1415 閱讀 7961

.lazy

input_lazy:}

.lazy 當在文字框輸入內容,並且游標焦點沒有離開文字框時,屬性值沒有實時發生變化

而當焦點離開文字框時,屬性值發生了變化並與文字框內容保持一致。從這個例子可以看出 .lazy 修飾符延遲了同步更新屬性值的時機。

即將原本繫結在 input 事件的同步邏輯轉變為繫結在 change 事件上。

.number

該修飾符用來將輸入內容自動轉換成數值。

input_number:}

.number 當開始輸入數字時,屬性值將實時更新成number型別的數值。數字後輸入其他非數字的字元,屬性值將不再變化。

而當開始輸入非數字的字串時,因為vue無法將字串轉換成數值,所以屬性值將實時更新成相同的字串。

即使後面輸入數字,也將被視作字串。

.trim

該修飾符用來自動過濾字串前後的空字元。

input_trim:}

.trim vue會自動過濾掉前後的多個空格,最終屬性值是前後沒有空字元的字串。

繫結的事件修飾符可以改變事件的觸發方式。

.stop

該修飾符將阻止事件向上冒泡。同理於呼叫 event.stoppropagation() 方法

stoppropagation

.stop: }

.stop 按照事件冒泡原理,點選按鈕時,從當前觸發的元素開始,沿著它的父元素一直到根元素,都會依次觸發 click 事件。

但是應用了 .stop 修飾符後,將只會觸發當前元素的 click 事件,並阻止事件向上冒泡。

.prevent

該修飾符會阻止當前事件的預設行為。同理於呼叫 event.preventdefault() 方法

.prevent:

.prevent 當點選提交按鈕時,會觸發繫結的事件,並且阻止表單提交並重新整理當前頁面的預設行為。

.self

該指令只當事件是從事件繫結的元素本身觸發時才觸發** 只當事件在該元素本身(而不是子元素)觸發時觸發**

self

.self: }

因為 div_click 事件被修飾符繫結,只有在直接點選到父元素 div ,即紅色區域內,事件才會被觸發。

即使點選了它的子元素觸發了子元素的事件,按照事件冒泡原理,父元素的事件應當被觸發,但是因為事件的觸發源並不是事件繫結的元素本身,所以父元素事件不會被觸發。

.once

該修飾符表示繫結的事件只會被觸發一次

once

once: }

.once 多次點選按鈕。只有在第一次點選時,事件才會觸發。

該修飾符可以用來監聽鍵盤事件

通過 keyup.keycode 的方式來監聽鍵盤特定按鍵的事件。也可以通過按鍵名稱來監聽

keygen: }

也可以自定義按鍵名稱

自定義按鍵名稱:}}})

vue學習 vue修飾符

vue為v on或者 的方式提供了事件修飾符,通過點 表示的指令字尾來呼叫修飾符。如v on click.stop。stop 阻止事件向外冒泡 prevent 阻止預設行為 capture 將事件冒泡改為事件捕獲的方式 self 只會觸發自己的預設行為,也就是說只有在e.target e.curre...

vue修飾符與事件修飾符

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

vue 事件修飾符

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