Vue的事件监听指令v-on怎么使用

发布时间:2022-08-10 16:56:53 作者:iii
来源:亿速云 阅读:208

这篇文章主要介绍了Vue的事件监听指令v-on怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue的事件监听指令v-on怎么使用文章都会有所收获,下面我们一起来看看吧。

Vue的事件监听指令v-on怎么使用

v-on指令介绍

在Vue中绑定事件监听器,事件类型由参数指定;表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

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

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

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

先来看一个简单的示例

<!-- Template -->
<div id="app">
    <h2 v-on:click="clickMe">点击我</h2>   
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    methods: {
        clickMe: function() {
            alert("点击我,我就出来了!(^_^)")
        }
    },
    data: {
    }
})

看到的效果如下:

Vue的事件监听指令v-on怎么使用

在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在事件处理的过程中自带了一些修饰符:

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

v-on示例

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

Vue的事件监听指令v-on怎么使用

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

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

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

两个按钮上都绑定了一个click事件,点击按钮分别触发increasereduce两个函数,前者做加法,后者做减法。另外一个元素中我们有一个值{{ 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

对于这么简单的效果,我们也可以直接在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>

// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一样:

Vue的事件监听指令v-on怎么使用

关于“Vue的事件监听指令v-on怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue的事件监听指令v-on怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. vue如何使用监听事件 v-on
  2. vue常用命令v-on

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

v-on vue

上一篇:Vuex状态管理之Action异步操作实例分析

下一篇:Vue怎么通过$emit方法实现子父组件通信

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》