Vue 事件監聽(事件監聽 修飾符)

2022-02-16 15:05:06 字數 1787 閱讀 2241

1、v-on

(1)v-on的基本使用

"

">"

increment

">加

"decrement

">減

vue(,

methods: ,

decrement() }})

(2)語法糖

"

">"

increment

">加

"decrement

">減

在事件監聽的時候,如果函式沒有引數就可以將小括號省略掉

(3)傳遞引數

"

">

"cli(123)

">點選

">點選

當方法需要傳遞引數但是沒有傳遞引數的時候,預設傳遞的是event物件。

"

">

"cli(123,$event)

">點選

需要注意的問題是,如果傳遞進去的第乙個引數是按照名命規範進行的命名且未加單引號就會去data裡面找資料,如果data裡面沒有資料就會出現錯誤

2、修飾符

(1)stop阻止事件冒泡

在div裡面定義乙個button,點選button後div的click也會被觸發,這就是事件冒泡

"

" @click="

divcli(123)

">

"btncli(233)

">點選

對click新增修飾符,冒泡即可被阻止 ,只有點選div的時候才會觸發,點選button的時候是不會觸發的

"

" @click="

divcli(123)

">

"btncli(233)

">點選

(2)prevent修飾符:阻止預設行為

"

">

vue(}})

預設的情況是,點選提交後會進行頁面的跳轉,在新增prevent之後會將這樣的預設行為組織掉

(3)指定鍵盤按鍵的監聽

"

">

"text

" @keyup.enter="

btncli('www')

">

vue(}})

這樣的話只有在點選enter鍵的時候事件才會觸發,否則,其它鍵盤按鍵被點選後也會觸發

(4)once,只有第一次的時候會觸發

"

">

"btncli(222)

">點選

vue(}})

只有第一次點選按鍵的時候觸發了事件

vue 監聽螢幕變化 銷毀監聽事件

記一次小坑.由於用到 echarts 需要自適應螢幕,所以在vue中用了監聽事件並且考慮到效能問題,所以用lodash 庫的 debounce 做了包裹.如下 mounted beforedestroy methods 然而發現切換到其他的頁面的時候,螢幕改變的時候還是會觸發 resize 事件,因...

監聽事件OnPageChangeListener

設定監聽事件setonpagechangelistener,這是乙個方法,引數是監聽事件類的物件 監聽事件類onpagechangelistener,這是乙個類,一般用於繼承重寫 監聽事件類中的方法 onpagescrollstatechanged onpagescrolled onpagesele...

Spring 監聽事件

contextclosedevent 上下文關閉的時候發布的事件 contextrefreshedevent 上下文初始化或者重新整理的時候發布的事件 requesthandledevent 上下文中,當乙個請求被處理後發布的事件 b 自定義事件及事件的監聽 b 2 發布事件 context.pub...