vue 的常用事件

語言: CN / TW / HK

vue 的常用事件

事件處理

1.使用 v-on:xxx 或 @xxx 繫結事件,其中 xxx 是事件名; 2.事件的回撥需要配置在 methods 物件中,最終會在 vm 上;

3.methods 中配置的函式,不要用箭頭函式!否則 this 就不是 vm 了;

4.methods 中配置的函式,都是被 Vue 所管理的函式,this 的指向是 vm 或 元件例項物件;

5.@click="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. 當捕獲存在時,先從外到裡的捕獲,剩下的從裡到外的冒泡輸出。