.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...