v-on事件指令用于绑定事件。

1基本用法

v-on指令绑定事件后，会监听对应的事件。

html:

Div id='app' h3已点击{{count}}次/h3按钮@click=' count ' click me/button/div注意：@ click是on:click的简称，@表示on3360。

js:

脚本var app=new Vue({ el: '#app '，data : { count :0 } })；/脚本效果：

@click表达式可以是直接的js语句，也可以是在vue实例的方法中定义的函数名。

html:

Button @click='quickAdd(3)'快速增长/buttonjs:

methods: { quickAdd:函数(I){ I=I | | 1；//为了避免参数为null或未定义，这里设置了默认值1 this.count=i。}}效果：

注意：如果@click调用的方法名不需要参数，可以不留括号。

使用Vue.js的一个好处是，在销毁ViewModel时，绑定到它的所有事件处理程序都将被自动销毁。

2调用DOM事件

Vue.js还提供了一个$event变量，可以用来访问本机DOM事件。$event变量可以通过方法传入。

html:

div id=' app 2 ' a href=' www . 163.com ' rel=' externalnofallow ' @ click=' open URL '(' disabled '，$event ')已禁用/a/divjs:

var app2=new Vue({ el: '#app2 '，data: { count: 0 }，methods: { openUrl:函数(param，event){ event . preventdefault()；console . log(' param : ' param)；} }});输出结果：

Param:已禁用

此示例使用传入的事件参数来禁用原始链接跳转逻辑。

3个事件修饰符

Vue.js支持以下事件修饰符：

事件修饰符示例表明。stop @click.stop防止click事件冒泡。阻止@submit .阻止提交页面不再重新加载页面。capture @click.capture在添加事件侦听器时使用事件捕获模式。self @click.self只有在click事件是元素自己的事件时才会被触发。once @click.once只触发一次。4键修饰符

您可以使用键修饰符来监听表单元素上的键盘事件。

html:

div id=' app 3 ' input @ key up . 13=' EnTERClick '/div js:

var app3=new Vue({ el: '#app3 '，data : })，methods : { EnTERClick : function(){ console . log(' EnTERClick ')；} }});输出：输入点击

此示例演示如何通过回车键修饰符绑定事件函数。

除了使用键码指定密钥之外，我们还可以使用以下密钥别名：进入。选项卡。删除。ESC。空间。起来。趴下。向左。右键和一些键修饰符可以组合使用或与鼠标一起使用：ctrl . alt . shift . meta:MAC下的命令键和Windows下的窗口键。html:

div id=' app 4 ' input @ key up . alt . 83=' save '/div js:

var app4=new Vue({ el: '#app4 '，data: {}，methods : { save : function(){ console . log(' save '))；} }});输出：保存

在本例中，我们通过组合按键修饰符将alt S事件绑定到输入框。

本文示例(演示)

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。