vue 的常用事件
vue 的常用事件
事件處理
1.使用 v-on:xxx 或 @xxx 繫結事件,其中 xxx 是事件名; 2.事件的回撥需要配置在 methods 物件中,最終會在 vm 上;
3.methods 中配置的函式,不要用箭頭函式!否則 this 就不是 vm 了;
4.methods 中配置的函式,都是被 Vue 所管理的函式,this 的指向是 vm 或 元件例項物件;
[email protected]="demo" 和 @click="demo($event)" 效果一致,但後者可以傳參;
事件修飾符:
1.prevent:阻止預設事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只觸發一次(常用);
4.capture:使用事件的捕獲模式;
5.self:只有 event.target 是當前操作的元素時才觸發事件;
6.passive:事件的預設行為立即執行,無需等待事件回撥執行完畢;
1.prevent:阻止瀏覽器預設事件(常用)
什麼是瀏覽器的預設事件呢?
- a 標籤的跳轉
- form 表單的提交
- 網頁中右鍵單機,會彈出一個選單(你可以試一試)
程式碼
正常來說 當我點選這個 a 標籤之後 會跳轉到百度 可是 他並不是我們想象的樣子
可以看到 是alert彈出框的提示 說明prevent修飾符 發生了作用 阻止了瀏覽器預設事件的呼叫
2.stop:阻止事件冒泡(常用)
直接上程式碼
- 可以看到 給div和 button和設定了點選事件 那麼 stop:阻止事件冒泡到底是啥呢 ?下面解釋
- 我們待會會點選裡面的button 基礎好的小夥伴肯定會知道 會觸發兩次彈出那麼這是為啥呢
- 是因為 產生了冒泡事件
-
可以看到 發生了 兩次彈窗
-
當我們點選了確認之後 第二次提示框出來了
這個在有些場景中可能不適用 那麼我們該如何只讓它 傳送一次彈窗呢?
毋庸置疑 那就是我們的 stop:阻止事件冒泡
下面讓我們看看 加上之後的執行效果吧!
執行效果
3.once:事件只觸發一次(常用)
字面意思 只觸發一次
程式碼
這是我們已點選多次的結果
4.capture:使用事件的捕獲模式
所有的操作 點選的都是 最裡面的兒子
先看程式碼
現在給@click新增.capture修飾符
給兒子 加
結果
給爸爸加
結果:
總結:
1. 冒泡是從裡往外冒,捕獲是從外往裡捕。
2. 當捕獲存在時,先從外到裡的捕獲,剩下的從裡到外的冒泡輸出。
- Python 中生成器的原理
- 對開源框架躍躍欲試,卻在寫的時候犯了難?
- 一文讀懂數倉中的pg_stat
- Linux系列之查詢命令
- 聊聊支付流程的設計與實現邏輯
- (資料庫提權——Redis)Redis未授權訪問漏洞總結
- springboot的@ConditionalOnBean註解
- 使用 Cheat Engine 修改 Kingdom Rush 中的金錢、生命、星
- Java String類
- 一次 Keepalived 高可用的事故,讓我重學了一遍它!
- 面試突擊61:說一下MySQL事務隔離級別?
- 小樣本利器2.文字對抗 半監督 FGSM & VAT & FGM程式碼實現
- Spring框架系列(7) - Spring IOC實現原理詳解之IOC初始化流程
- crane:字典項與關聯資料處理的新思路
- 面試突擊60:什麼情況會導致 MySQL 索引失效?
- Java遞迴實現評論多級回覆
- Docker 與 K8S學習筆記(二十四)—— 工作負載的使用
- vue 的常用事件
- 158_模型_Power BI 使用 DAX SVG 打通製作商業圖表幾乎所有可能
- 資料庫系列:MySQL索引優化總結(綜合版)