Vue 事件監聽 v-on

事件監聽

v-on介紹

• 在前端開發中，我們需要經常和用於交互。這個時候，我們就必須監聽用戶發生的時間，比如點擊、拖拽、鍵盤事件等等

• 在Vue中如何監聽事件呢？使用v-on指令

• 作用：綁定事件監聽器

• 縮寫：語法糖 @

• 預期：Function | Inline Statement | Object

• 參數：event

v-on基礎

• 我們用一個監聽按鈕的點擊事件，來簡單看看v-on的使用
• 下面的代碼中，我們使用了v-on:click="counter++”
• 另外，我們可以將事件指向一個在methods中定義的函數

<div id="app">
  <h2>{{counter}}</h2>
  <button v-on:click="counter++">點擊按鈕1</button>
  <button v-on:click="btnClick()">點擊按鈕2</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick() {
        this.counter++
      }
    }
  })
</script>

v-on也有對應的語法糖：v-on:click可以寫成@click

  <button v-on:click="counter++">點擊按鈕1</button>
  <button v-on:click="btnClick()">點擊按鈕2</button>
 <!--語法糖-->
  <button @click="counter++">點擊按鈕3</button>
  <button @click="btnClick()">點擊按鈕4</button>

v-on參數

當通過methods中定義方法，以供@click調用時，需要注意參數問題：

• 情況一：如果該方法不需要額外參數，那么方法后的()可以不添加。
  • 但是注意：如果方法本身中有一個參數，那么會默認將原生事件event參數傳遞進去
• 情況二：如果需要同時傳入某個參數，同時需要event時，可以通過$event傳入事件。

<div id="app">
  <h2>點擊次數: {{counter}}</h2>
  <!--情況一: 方法沒有參數-->
  <button @click="btnClick1">按鈕1</button>
  <button @click="btnClick1()">按鈕1</button>

  <!--情況二: 如果方法有參數-->
  <!--1.調用時不傳入參數,會默認將event作為第一個參數傳入-->
  <button @click="btnClick2">按鈕2</button>
  <!--2.調用時不傳入參數,那么參數為undefined-->
  <button @click="btnClick2()">按鈕2</button>

  <!--情況三: 如果方法有參數,並且希望傳入event-->
  <button @click="btnClick3(10, $event)">按鈕3</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick1() {
        console.log('按鈕1被點擊');
      },
      btnClick2(payload) {
        console.log('按鈕2被點擊', payload);
      },
      btnClick3(num, event) {
        console.log('按鈕3被點擊', num, event);
      }
    }
  })
</script>

v-on修飾符

在某些情況下，我們拿到event的目的可能是進行一些事件處理。Vue提供了修飾符來幫助我們方便的處理一些事件：

• .stop - 調用 event.stopPropagation()
• .prevent - 調用 event.preventDefault()
• .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調
• .native - 監聽組件根元素的原生事件
• .once - 只觸發一次回調

<!-- 停止冒泡 -->
<button @clcik.stop="doThis"></button>

<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認行為 -->
<form @submit.prevent></form>

<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調只回調一次 -->
<button @click.once="doThis"></button>

擴展:事件

事件監聽機制

概念：某些組件被執行了某些操作后，觸發某些代碼的執行。

事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標移動了。

事件源：組件。如： 按鈕 文本輸入框...

監聽器：JavaScript代碼。

注冊監聽：將事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。

常見的事件

• 點擊事件

  • onclick：單擊事件
  • ondblclick：雙擊事件

• 焦點事件

  • onblur：失去焦點
  • onfocus: 元素獲得焦點。

• 加載事件

  • onload：一張頁面或一幅圖像完成加載。

• 鼠標事件

  • onmousedown 鼠標按鈕被按下。
  • onmouseup 鼠標按鍵被松開。
  • onmousemove 鼠標被移動。
  • onmouseover 鼠標移到某元素之上。
  • onmouseout 鼠標從某元素移開。

• 鍵盤事件

  • onkeydown 某個鍵盤按鍵被按下。
  • onkeyup 某個鍵盤按鍵被松開。
  • onkeypress 某個鍵盤按鍵被按下並松開。
  • 選擇和改變
  • onchange 域的內容被改變。
  • onselect 文本被選中。

• 表單事件

  • onsubmit 確認按鈕被點擊。
  • onreset 重置按鈕被點擊。