我们能够用 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，事宜处置惩罚就变得相称简朴了。