vue學習 vue修飾符

vue為v-on或者@的方式提供了事件修飾符，通過點(.)表示的指令字尾來呼叫修飾符。如v-on:click.stop。

.stop 阻止事件向外冒泡

.prevent 阻止預設行為

.capture 將事件冒泡改為事件捕獲的方式

.self 只會觸發自己的預設行為，也就是說只有在e.target === e.currenttarget 才會執行。

.once 只執行一次，後面即時資料變化我也不再重新渲染。

.passive 阻止滾動條行為(一般常用於移動端)

.native (監聽元件根元素的原生事件，主要是給自定義的元件新增原生事件)

這個修飾符是作用表單標籤的v-model上的。如v-model.lazy

.lazy 在改變後才觸發（也就是說只有游標離開input輸入框的時候值才會改變）

.number 將輸出字串轉為number型別·（雖然type型別定義了是number型別，但是如果輸入字串，輸出的是string）

.trim 自動過濾使用者輸入的首尾空格

.enter：回車鍵，輸入內容之後，只有按下enter才會觸發內容

.tab：製表鍵

.delete：含delete和backspace鍵

.esc：返回鍵

.space: 空格鍵

.up：向上鍵

.down：向下鍵

.left：向左鍵

.right：向右鍵

.ctrl

.alt

.shift

.meta

備註：這個修飾符必需兩個鍵同時按下才有用。

vue修飾符學習

lazy input lazy lazy 當在文字框輸入內容，並且游標焦點沒有離開文字框時，屬性值沒有實時發生變化 而當焦點離開文字框時，屬性值發生了變化並與文字框內容保持一致。從這個例子可以看出 lazy 修飾符延遲了同步更新屬性值的時機。即將原本繫結在 input 事件的同步邏輯轉變為繫結在 c...

vue修飾符與事件修飾符

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

vue 事件修飾符

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