vue之修飾符

2021-09-24 10:44:18 字數 1333 閱讀 9872

在事件處理程式中呼叫event.preventdefault()或event.stoppropagation()是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。

為了解決這個問題， vue.js 為v-on提供了 事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。

<


a v-on:click.stop


="dothis"


>


a>


<


form 


v-on:submit.prevent


="onsubmit"


>


form


>


<


a v-on:click.stop.prevent


="dothat"


>


a>


<


form 


v-on:submit.prevent


>


form


>


<


div 


v-on:click.capture


="dothis"


>...


div>


<


div 


v-on:click.self


="dothat"


>...


div>
在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 vue 允許為v-on在監聽鍵盤事件時新增按鍵修飾符：

<


input 


v-on:keyup.13


="submit"


>



<


input 


v-on:keyup.enter


="submit"


>


<


input 


@keyup.enter


="submit"


>
全部的按鍵別名：記住所有的 keycode 比較困難，所以 vue 為最常用的按鍵提供了別名：

可以通過全域性config.keycodes物件自定義按鍵修飾符別名：

// 可以使用 v-on:keyup.f1


vue.config.keycodes.f1 = 112
posted @

2019-06-04 17:19

或許這就是生活 閱讀(

...)

編輯收藏

vue之 native修飾符

native修飾符就是用來註冊元素的原生事件而不是元件自定義事件的 比如 自定義button.vue元件 template button type button click clickhandler slot button template export default 引用button.vue元件...

vue修飾符與事件修飾符

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

vue學習 vue修飾符

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