事件監聽

v-on介紹

在前端開發中，咱們須要常常和用於交互。這個時候，咱們就必須監聽用戶發生的時間，好比點擊、拖拽、鍵盤事件等等前端
在Vue中如何監聽事件呢？使用v-on指令vue
做用：綁定事件監聽器app
縮寫：語法糖 @函數
預期：Function | Inline Statement | Objectthis
參數：eventspa

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調用時，須要注意參數問題：code

狀況一：若是該方法不須要額外參數，那麼方法後的()能夠不添加。
- 可是注意：若是方法自己中有一個參數，那麼會默認將原生事件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提供了修飾符來幫助咱們方便的處理一些事件：orm

.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>

擴展:事件

事件監聽機制

概念：某些組件被執行了某些操做後，觸發某些代碼的執行。seo

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

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

監聽器：JavaScript代碼。

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

常見的事件

點擊事件
- onclick：單擊事件
- ondblclick：雙擊事件
焦點事件
- onblur：失去焦點
- onfocus: 元素得到焦點。
加載事件
- onload：一張頁面或一幅圖像完成加載。
鼠標事件
- onmousedown 鼠標按鈕被按下。
- onmouseup 鼠標按鍵被鬆開。
- onmousemove 鼠標被移動。
- onmouseover 鼠標移到某元素之上。
- onmouseout 鼠標從某元素移開。
鍵盤事件
- onkeydown 某個鍵盤按鍵被按下。
- onkeyup 某個鍵盤按鍵被鬆開。
- onkeypress 某個鍵盤按鍵被按下並鬆開。
- 選擇和改變
- onchange 域的內容被改變。
- onselect 文本被選中。
表單事件
- onsubmit 確認按鈕被點擊。
- onreset 重置按鈕被點擊。

Vue 事件監聽