Vue的事件监听指令v-on怎么使用
这篇文章主要介绍了Vue的事件监听指令v-on怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue的事件监听指令v-on怎么使用文章都会有所收获,下面我们一起来看看吧。
创新互联是一家专注于网站建设、成都做网站与策划设计,华容网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:华容等地区。华容做网站价格咨询:13518219792
v-on指令介绍
作用:绑定事件监听器
缩写:@
预期:Function (方法) | Inline Statement(内部表达式) | Object(对象)
参数: event
在Vue中绑定事件监听器,事件类型由参数指定;表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
从v2.4.0
开始v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
用在普通元素上时,只能监听 原生DOM事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生DOM事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个$event属性:v-on:click="handle('ok', $event)"。
先来看一个简单的示例
// JavaScript var 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
的使用方式,除了上面的示例展示之外,还有下面这些使用方式:
在子组件上监听自定义事件(当子组件触发my-event
时将调用事件处理器):
从上面的简单示例中,可以看出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中,我们的模板中有三个元素,两个按钮,一个显示数字的容器,第一个按钮做加的计算,第二个按钮做减的计数。简单的结构如下所示:
{{ count }}
两个按钮上都绑定了一个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
。
对于这么简单的效果,我们也可以直接在v-on中处理完:
比如我们前面的示例,修改下:
{{ count }}// JavaScript let app = new Vue({ el: '#app', data: { count: 0 } })
效果一样:
关于“Vue的事件监听指令v-on怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue的事件监听指令v-on怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
网页名称:Vue的事件监听指令v-on怎么使用
文章链接:http://myzitong.com/article/gdhcde.html