iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
1
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 12

v-on 監聽事件與修飾符

人一生的「幸福指數」呈現 U 型曲線分佈,猜猜哪一個年紀歲數是 U 的低端?

在介紹 Vue 的修飾符(Modifiers)之前我們來複習一下和修飾符一起搭配使用的事件監聽指令v-on

事件監聽與觸發在網頁上的應用非常廣,無論是滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊,都可以因為這個互動讓網頁做些事。但在程式裡,其實就是瀏覽者做了某些事(事件監聽),然後我們要給出什麼反應(事件觸發)。例如點一下按鍵,我們要程式去做某些事,或是呼叫某支函式要它做些什麼,或者,我們希望能取到瀏覽者所點擊到的值(例如點擊的座標位置)。

我們先來看一下在 Codepen 的範例效果:Vue.js Event Handling 事件處理

這範例中我們分三個部分來示範在事件處理時, 以及 Vue 會用到的一些指令。

監聽事件的綁定

我們可以使用 vue 的@click="觸發事件的方法"來監聽與綁定事件:
第一個按鈕test1: 一般的觸發事件,直接取到我們點擊按鈕的值。
第二個按鈕test2: 帶參數的觸發事件,可直接取到我們給的參數。
第三個按鈕test3: 點擊的事件,可加上 vue 的特殊變數$event來監聽,但事實上如果我們沒有加上$event此參數,vue 也會自動幫我們抓取event監聽的對象。
第四個按鈕test4: 希望可以帶參數,同時又可取到監聽對象的值。

<button @click="test1">test1</button>
<!-- 綁定自己的資料 -->
<button @click="test2('Hello')">test2</button>

<!-- 可利用vue的特殊變數$event 來拿到button的值 -->
<!-- 等同這樣寫: <button @clock="test3">test3</button> -->
<button @click="test3($event)">test3</button>

<!-- 想傳自己給的變數,同時想取得點取 event 的值 -->
<button @click="test4(42,$event )">test4</button>

在實例中的 methods 準備好觸發的方法函式:

methods: {
        test1() {
          alert('test1')
        },
        test2(msg) {
          alert(msg)
        },
        test3(event) {
          // 透過 event裡的target與innerHTML去取得按鈕的內容
          alert(event.target.innerHTML)
        },
        test4(nbr, event) {
          alert(nbr + '---' + event.target.innerHTML)

        },
}

事件修飾符

在觸發事件的時候,可以傳遞自定義參數與事件的修飾符,寫法和呼叫函式的傳參類似,例如,如果我們希望觸發事件除了以「點擊」的方式,也希望「按下 entre」也能觸發,那就可以在元素裡觸發方法加上修飾符.entre來達到效果。

Vue 的事件修飾符有很多種,在此介紹最常用的幾種:

阻止冒泡行為:@click.stop

在原生的 Javascript 如果要防止冒泡行為或預設行為,需要在 JavaScript 裡的監聽對象加上stopPropagation()
例如有兩個大小疊在一起、可點擊的 box,如果想點擊小 box,也會同時觸發到在它底部的大 box ,這即是「冒泡事件」。
在 vue 裡,只要在希望被點取的那個 div(這裡指小 box) 的@click="" 加上.stop,如@click.stop=""即可阻止冒泡事件,非常方便。

阻止事件默認行為: @click.prevent

如果有一個連結,我們想阻止事件的默認行為,也就是點擊後不想直接導向到連結網址去該怎麼做?在原生的 JavaScript 我們同樣需要使用event.preventDefault()來阻止 html 裡的預設行為,但是在 vue 裡,只要在 html 使用事件修飾符prevent就可以達到效果。

<!-- 防止(stop)事件冒泡 -->
<div class="box1" @click="test5">
  <div class="box2" @click.stop="test6"></div>
</div>
<!-- 阻止事件默認行為 -->
<a href="http://google.com" @click.prevent="test7">去google</a>

在實例的 methods 準備好觸發的方法:

methods:{
  test5() {
    alert('out')
  },
  test6() {
    alert('inner')
  },
  test7(event) {
    alert('點到了')
  },
}

按鍵修飾符 @keyup.enter

通常我們在 input 填好資料時,需要按一個送出的按鈕來送出,但其實用 enter 鍵會直覺很多,使用 Vue 的按鍵修飾符@keyup來指定監聽的方式是鍵盤輸入,如果想指定某一個鍵,需要知道按下的那個鍵的鍵碼,才能指定,如果不知道我們指定的鍵的鍵碼,可以用alert(event.keyCode)來查詢。

原生的寫法可用條件式判斷if (event.keyCode === 13)(這裡的 13 是 enter 鍵的鍵值),確定點到的是指定的鍵。在 Vue 可直接將鍵碼加到 keyup 後面 --> keyup.13 或是直接寫鍵名(只限定特殊鍵)keyup.enter 也可以達到一樣的效果。

<!-- 想使用enter鍵輸入 -->
<input type="text" @keyup.13="test8" />
<input type="text" @keyup.enter="test8" />

在實例的 methods 準備好觸發的方法:

methods:{
  test8($event) {
    alert(event.target.value + '--' + event.keyCode)
  }
}

在 Vue 裡還有許多其他的事件修飾符:stop / prevent / capture / self / once / passive。用法可以參閱官方文件事件處理 — Vue.js 來了解各項用法。

Vue 把以往需要在 JavaScript 裡寫的程式碼,全部改成在 HTML 就可處理的指令,的確方便許多,但也要知道 Javascript 的原生寫法,才不會改天需要寫原生寫不出來,這就是 Vue 的方便會費人 JS 武功的原因了。

參考:
Vue.js 修飾符

每日一句法文有益身心:D'accord ! --> 搭.勾! --> 好的! --> 要和我一起吃飯嗎?d'accord


上一篇
Vue 表單元素資料的雙向綁定 v-model
下一篇
Vue 實作一個簡單的 Todo List [上]
系列文
Déjà-vu ? 要 Vue 過才知道30

1 則留言

0
mangoSu
iT邦新手 5 級 ‧ 2020-09-27 18:16:41

有範例太棒惹~

tsuifei iT邦新手 5 級 ‧ 2020-10-07 16:00:06 檢舉

歐~芒果~謝謝你來看我 /images/emoticon/emoticon51.gif

我要留言

立即登入留言