vue事件相關

2021-10-09 21:06:44 字數 1840 閱讀 1746

-實現方法:

//模板裡邊

《標籤v-on:事件型別

="事件函式"

>

標籤》《標籤

v-on:事件型別

="事件函式()"

>

標籤》//簡寫:

《標籤@事件型別

="事件函式"

>

標籤》《標籤

@事件型別

="事件函式()"

>

標籤》

new

vue(

, methods:}}

)

-實現方法:

//模板裡邊

《標籤v-on:事件型別

="事件函式(實參)"

>

標籤》//簡寫:

《標籤@事件型別

="事件函式(實參)"

>

標籤》

new

vue(

, methods:}}

)

事件物件.

preventdefault()

;//阻止預設行為

事件物件.target//事件源

-實現方法:

//模板裡邊

《標籤v-on:事件型別

="事件函式"

>

標籤》//簡寫:

《標籤@事件型別

="事件函式"

>

標籤》

new

vue(

, methods:}}

)

-實現方法:

//模板裡邊  $event不可以寫錯

《標籤v-on:事件型別

="事件函式($event,實參)"

>

標籤》//簡寫:

《標籤@事件型別

="事件函式($event,實參)"

>

標籤》

new

vue(

, methods:}}

)

事件簡寫僅限於對變數進行一些簡單的賦值修改,比如num++

事件修飾符

含義:幫助我們實現一些方便操作(比如:阻止預設事件,阻止冒泡,捕獲觸發等等)

寫法:

《標籤 @事件型別.修飾符=

"事件函式"

>

<

/標籤》

《標籤 @事件型別.修飾符1.修飾符2

="事件函式"

>

<

/標籤》

.prevent 阻止預設事件

.stop 阻止冒泡

.self 本身觸發

.once 只執行一次

.capture 事件捕獲

.passive 滾動行為將會立即觸發

按鍵事件修飾符

按鍵修飾符是給按鍵相關事件的

只用乙個修飾符,不要串聯

按鍵事件:keyup keydown keypress

修飾符:

.enter

.tab

.delete (捕獲「刪除」和「退格」鍵)

.esc

.space

.up.down

.left

.right

自定義按鍵修飾符:一般放在例項化之前去配置

vue.config.keycodes.按鍵修飾符名 = 按鍵的keycode碼

Vue事件相關的例項方法

vue.js提供了四個事件api,分別為 on,once,off,emit 在vue例項上建立乙個 events物件,存放事件 存放事件名以及對應執行方法。初始化事件 export function initevents vm component on方法用來在vue例項上監聽自定義事件,該事件由e...

VUE中非相關元件傳參(事件匯流排)

實現是效果是單擊count元件中的按鈕count和helloworld元件中的值都加1 main.js中 如下 import vue from vue import vuex from vuex import vant from vant import vant lib index.css impo...

Vue事件機制

眾所周知,vue.js為我們提供了四個事件api,分別是 on,once,off,emit。初始化事件 初始化事件在vm上建立乙個 events物件,用來存放事件。events的內容如下 存放事件名以及對應執行方法。初始化事件 export function initevents vm compon...