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>

运行结果

image.png

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

image

click 事件

1. click 事件直接使用 JavaScript 语句<button v-on:click="count ++">点击加一</button>
   

2. click 事件直接绑定一个方法<button v-on:click="greet">greet</button>绑定方法可以使用缩写语法：<button @click="greet">greet</button>
   

3. click 事件使用内联语句调用方法<button @click="say('hi')">hi</button>
   

methods 属性对象定义方法

greet: function () {          }

对象方法的简写语法

say(msg) {         }

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

运行结果：

image.png

事件修饰符

在事件处理程序中调用 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">//只有在鼠标右键单击的时候才会触发事件处理函数