持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

点击查看上篇

v-on指令

v-on指令用于监听DOM事件，并在触发是运行一些JavaScript代码。v-on指令的表达式可以是一段JavaScript代码，也可以是一个方法的名字或者方法调用语句

代码演示：

<template>
  <div id="app">
    <p>
      <span>count:{{count}}</span>
      <button v-on:click="count ++">点击加一</button>

    </p>
    <p>
      <button v-on:click="greet">greet</button>
    </p>
    <p>
      <button @click="say('hi')">hi</button>
    </p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0,
      message: 'hello'
    }
  },
  methods: {
    greet: function () {
      alert(this.message)
    },
    say(msg) {
      alert(msg)
    }
  }
}
</script>

运行结果

点击greet按钮弹出一个警告框

click事件

click事件直接使用JavaScript语句<button v-on:click="count ++">点击加一</button>
click事件直接绑定一个方法<button v-on:click="greet">greet</button>绑定方法可以使用缩写语法：<button @click="greet">greet</button>
click事件使用内联语句调用方法<button @click="say('hi')">hi</button>

methods属性对象定义方法

greet: function () {
      
    }

对象方法的简写语法

  say(msg) {
     
    }

如果在事件绑定的方法中需要访问原始的DOM事件，可以使用特殊变量 $event把他传入方法。我们知道，在单击链接的时候，会跳转到链接指向的页面，然而有时候会根据某个条件是否达成来决定是否跳转，如果条件不满足，这时就会调用事件对象的preventDefault()方法来阻止跳转。在使用v-on指令绑定事件处理器时，就可以使用$ event传入原始的DOM事件对象，然后再事件处理器方法中访问原生的事件对象。

代码演示：

<template>
  <div id="app">

    <a href="/login" @click="login($event)">登录 </a>
    <router-view></router-view>
  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0,
      message: 'hello'
    }
  },
  methods: {
    login(event) {
      event.preventDefault()
      alert('登录失败')
    }
  }
}
</script>

运行结果：

事件修饰符

在事件处理程序中调用event。preventDefault()或event。stopPropagation()是非常常见的需求，为了解决这个问题，vue.js提供了事件修饰符，让我们可以专注于纯粹的数据逻辑，而不需要去考虑如何处理DOM事件细节

修饰符是由"."开头的指令后缀名来表示的，紧接在事件名称后书写。针对v-on指令，vue提供了以下的修饰符：

.stop :调用event.stopPropagation()
.prevent :调用event.preventDfault()
.capture :添加事件监听器时使用capture模式
.self ：只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode|keyAlias} :只当事件是从特定按键触发时才触发回调
.native : 监听组件根元素的原生事件
.once :只触发一次回调
.left :只当按鼠标左键时触发
.right :只当按鼠标右键时触发
.middle: 只当按鼠标中键时触发
.passive :以{passive：true}模式添加侦听器

事件修饰符的使用<a v-on:click.stop="doThis">禁止单击事件</a>

注意：修饰符可以串联在一起使用，但顺序很重要。例如使用v-on:click。prevent.self会阻止所有单击，而v-on:click.self.prevent只会阻止对元素自身的单击。如果某个事件只需要响应一次，可以使用。once修饰符

按键修饰符

在监听键盘事件时，经常需要检查详细的按键，为此可以在v-on监听键盘事件时添加按键修饰符

vue提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete(捕抓“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

此外还有系统修饰键，用来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：

.ctrl
.alt
.shift
.meta

例如：

<input @keyup.alt.67="clear">//Alt+c

注意：修饰符与常规按键并不相同，在和keyup事件一起使用时，事件触发时修饰符必须处于按下状态。例如下面的代码:

<input @keyup.ctrl.67="doSomething">

当同时按下Ctrl+c时doSomething()方法并不会被调用，只有在按住Ctrl键的情况下释放字母键c才会触发doSomething()方法的调用。要想在同时按下Ctr+某个键时触发keyup.ctrl.那么需要用Ctrl的虚拟键代码17来代替Ctrl修饰键。例如下面的代码：

<input @keyup.17.67="doSomething">

.exact修饰符

.exact修饰符是用于精确控制系统修饰符组合触发的事件

例如下面的代码：

<button @click.ctrl="onclick">A</button>//即使同时按下Alt或Shift键也会触发

<button @click.ctrl.exact="onclick">A</button>//只有在按住Ctrl键而不按其他键时才会触发

<button @click.exact="onclick">A</button>//只有在没有按下系统修饰符键时才会触发

鼠标按钮修饰符

.left
.right
.middle

例如下面的代码:

<input @click.right="doSomething">//只有在鼠标右键单击的时候才会触发事件处理函数

vue指令5