聊聊Vue的事件监听指令v-on-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

聊聊Vue的事件监听指令v-on

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢？使用v-on指令。下面本篇文章就来带大家了解一下Vue的事件监听指令v-on，希望对大家有所帮助！

v-on指令介绍

作用：绑定事件监听器

缩写：@

预期：Function (方法) | Inline Statement(内部表达式) | Object(对象)

参数： event

在Vue中绑定事件监听器，事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。（学习视频分享：vue视频教程）

从v2.4.0开始v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event属性：v-on:click="handle('ok', $event)"。

先来看一个简单的示例

<!-- Template --><div id="app">    <h1 v-on:click="clickMe">点击我</h1>   </div>// JavaScriptvar app = new Vue({    el: '#app',    methods: {        clickMe: function() {            alert("点击我，我就出来了!(^_^)")        }    },    data: {    }})

登录后复制

看到的效果如下：

在Vue的模板中，我们使用了v-on，并且绑定了一个click事件（v-on:click），然后给这个click事件绑定了一个事件clickMe。而这个clickMe在Vue中，我们一般是放在methods: {}中，也就是说clickMe这个函数写在methods中。

看到v-on:click="clickMe"，是不是非常像HTML中的onclock="clickMe"。从外表现象看，他们写法不一样，但是起到的结果是一致的。在Vue中，我们还可以使用@click来替代v-on:click。那么他们起到的作用是一样的。

在Vue中，对于v-on的使用方式，除了上面的示例展示之外，还有下面这些使用方式：

<!-- 方法处理器 --><button v-on:click="clickMe"></button><!-- 对象语法 （v2.4.0版本以上才支持） --><button v-on="{ mousedown: doThis, mouseup: doThat}"></button><!-- 内联语句 --><button v-on:click="doThat('Hello', $event)"></button><!-- 缩写 --><button @click="doThis"></button><!-- 停止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为， 没有表达式 --><form @submit.prevent></form><!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button><!-- 键修饰符， 键别名 --><input @keyup.13="onEnter" /><!-- 点击回调只会触发一次 --><button v-on:click.once="doThis"></button>

登录后复制

在子组件上监听自定义事件（当子组件触发my-event时将调用事件处理器）：

<my-component @my-event="handleThis"></my-component><!-- 内联语句 --><my-component @my-event="handleThis(123, $event)"></my-component><!-- 组件中的原生事件 --><my-component @click.native="onClick"></my-component>

登录后复制

从上面的简单示例中，可以看出Vue在事件处理的过程中自带了一些修饰符：

.stop：调用event.stopPropagation()

.prevent：调用event.preventDefault()

.capture：添加事件侦听器时使用capture模式

.self：只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调

.native：监听组件根元素的原生事件

.once：只触发一次回调

.left：只当点击鼠标左键时触发，（v2.2.0+ 才具有）

.right：只当点击鼠标右键时触发，（v2.2.0+ 才具有）

.middle：只当点击鼠标中键时触发，（v2.2.0+ 才具有）

.passive：以{passive: true}模式添加侦听器，（v2.3.0+ 才具有）

Vue的官网对事件的处理和组件的自定义的事件都有详细的介绍。如果感兴趣的话，可以查看相应的内容：

事件处理器

组件自定义事件

v-on示例

我们来做一个简单的效果，就是一个计数器，效果如下：

这个效果很简单，点击+数字往下加，点击-数字往下减。

在Vue中，我们的模板中有三个元素，两个按钮，一个显示数字的容器，第一个按钮做加的计算，第二个按钮做减的计数。简单的结构如下所示：

<div id="app">    <button v-on:click="increase">+</button>    <span>{{ count }}</span>    <button v-on:click="reduce">-</button></div>

登录后复制

两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({    el: '#app',    methods: {        increase: function() {            this.count++        },        reduce: function() {            this.count--        }    },    data: {        count: 0    }})

登录后复制

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

登录后复制

比如我们前面的示例，修改下：

<div id="app">  <button v-on:click="count += 1">+</button>  <span>{{ count }}</span>  <button v-on:click="count -= 1">-</button></div>// JavaScriptlet app = new Vue({  el: '#app',  data: {    count: 0  }})

登录后复制

效果一样：