1-4. Vue.js核心知識之事件處理

咱們能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

監聽事件

<!-- 每點擊一次按鈕，click後面的表達式就會執行一次 -->
<template>
<div id="counter">
  <button v-on:click="counter += 1">點擊次數加1</button>
  <p>你已經點了 {{ counter }} 次了</p>
</div>
</template>
<script>
new Vue({
  el: '#counter',
  data: {
    counter: 0
  }
})
</script>

事件處理方法

有些事件觸發的操做邏輯是很複雜的，甚至還須要傳遞參數，用上面的方法確定是不現實的，因此這裏咱們能夠把事件觸發操做邏輯寫成一個函數。

<!-- 點擊按鈕，click後面的calculate函數會把參數帶入執行，彈窗顯示3 -->
<template>
<div id="calculate">
  <button v-on:click="calculate(2, 3)">點擊計算2+3</button>
</div>
</template>
<script>
new Vue({
  el: 'calculate',
  methods: {
    calculate: function (a, b) {
        alert(a + b);
    }
  }
})
</script>

事件修飾符

事件處理程序中常常會用到 event.preventDefault() 或 event.stopPropagation() ，這裏vue.js幫咱們很容易的就實現了。

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">點擊看看</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">點擊看看</div>

按鍵修飾符

須要監聽鍵盤事件時，咱們也能夠使用vue.js的按鍵修飾符輕鬆的實現。

<!-- 只有在 `keyCode` 是 13 時調用onSubmit方法 -->
<input v-on:keyup.13="onSubmit">

<!-- 同上，按下 enter 鍵後會調用onSubmit方法 -->
<input v-on:keyup.enter="onSubmit">

<!-- Ctrl 被按下時會觸發，Ctrl和其餘鍵一塊兒按下也會觸發(2.1.0 新增) -->
<div v-on:click.ctrl="onCtrlClick">點擊鍵盤按鍵'Ctrl'看看</div>

<!-- 有且只有 Ctrl 被按下的時候才觸發(2.5.0 新增) -->
<button v-on:click.ctrl.exact="onCtrlClick">點擊鍵盤按鍵Ctrl</button>

<!-- 鼠標左鍵點擊時會觸發onClick方法(2.2.0 新增) -->
<div v-on:click.left="onClick">點擊鼠標左鍵看看</div>

總結

本節咱們學習了vue.js的事件處理，包括事件的監聽、觸發方法和各類修飾符，有沒有發現，使用vue.js，事件處理就變得至關簡單了。