html代码
<div id="app"> <button v-on:click="counter += 1">加1</button> <button @click="counter += 1">加2</button> <button v-on:click="minusOne">减1</button> <button @click="minus(2,$event)">减2</button> <p>当前值: {{ counter }} </p> </div>
javascript代码
var vm = new Vue({ el: "#app", data: { counter: 0 }, methods: { minusOne() { this.counter--; }, minus(number,event) { this.counter = this.counter - number; } } });
说明
1) v-是指令
2) v-on是绑定事件,可以简写成@click
3 ) 传参数的事件方法
事件修饰器
<!-- 阻止点击事件的冒泡行为 -->
<a v-on:click.stop="doThis"></a>
<!-- 阻止默认的表单提交 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 事件修饰器可以连用 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只需要修饰器,而无需处理方法 -->
<form v-on:submit.prevent></form>
<!-- 使用 capture 模式-->
<div v-on:click.capture="doThis">...</div>
<!-- 仅当event.target是自身的时候才执行 -->
<!-- 比如,这样写了之后点击子元素就不会执行后续逻辑 -->
<div v-on:click.self="doThat">...</div>
按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
原文地址:https://www.cnblogs.com/dahuo/p/9641953.html