技術標籤：vue.js

事件監聽

一、什麼是事件監聽

前端開發，需要經常互動。這個時候，我們需要監聽使用者發生的時間，如點選、拖拽、鍵盤事件等。

二、v-on指令

作用：繫結事件監聽器
縮寫：@
例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
 

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

結果為：

三、v-on引數

通過methods中定義方法，以供@click呼叫時，需要注意引數問題：

1. 事件定義時，寫函式時省略了小括號，但是方法本身是需要一個引數，這時vue會預設將瀏覽器生產的event事件物件作為引數傳到方法。（需要event就把引數寫上event）
2. 方法定義時，我們需要event物件，同時有需要其他引數時----使用**$event**手動獲取到瀏覽器引數的event物件
   注意：引數中字串‘abc’不加單引號時，會被當作變數處理

四、v-on修飾符

1. .stop修飾符
   .stop：阻止冒泡行為

2. .prevent修飾符
   .prevent：阻止預設事件

3. .keyCode
   監聽鍵盤按鍵

4. .once
   只觸發一次回撥

五、v-if、v-else-if、v-else

Vue條件指令可以根據表示式的值在dom中渲染或銷燬元素或元件