Vue.js v-on
v-on
-
缩写：
@ -
预期：
Function | Inline Statement | Object -
参数：
event
修饰符
| 事件修饰符 | 示例说明 |
|---|---|
.stop |
调用 event.stopPropagation(), 阻止单击事件冒泡。 |
.prevent |
调用 event.preventDefault(), 阻止默认事件。 |
.capture |
添加事件侦听器时使用 capture 模式（事件捕获模式）。 |
.self |
只当事件是从侦听器绑定的元素本身触发时才触发回调。 |
| `.{keyCode | keyAlias}` |
.native |
监听组件根元素的原生事件。 |
.once |
只触发一次回调。 |
.left |
只当点击鼠标左键时触发。(2.2.0) |
.right |
只当点击鼠标右键时触发。(2.2.0) |
.middle |
只当点击鼠标中键时触发。(2.2.0) |
.passive |
以 { passive: true } 模式添加侦听器。(2.3.0) |
用法
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件 / 监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
示例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></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>
按键别名
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
还有一些按键修饰符可以组合使用，或者和鼠标一起使用：
- .ctrl
- .alt
- .shift
- .meta：Mac 下为 Command 键，Windows 下为窗口键。
当然，如果你需要其他的键，vue.js 也为你提供了可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
修饰键
用法
基础用法
<div id="app">
<h3>已点击 {{count}} 次</h3>
<button @click="count++">点我</button>
<button @click="quickAdd(3)">快速增长</button>
</div>
注意： @click 是 v-on:click 的简写形式， @ 即表示 v-on:。
@click 表达式即可以直接使用 js 语句，也可以是一个定义在 vue 实例中 methods 内的函数名。
注意： @click 调用的方法名如果不需要参数，那么可以不写括号。
<script>
var app = new Vue({
el: '#app',
data: {
count:0
},
methods: {
quickAdd: function (i) {
i = i || 1;//为避免参数为 null 或 undefined 值，这里设定了默认值 1
this.count += i;
}
}
});
</script>
使用 Vue.js 的一个好处是：当销毁 ViewModel 时，会自动销毁所有绑定在其上的事件处理器。
$event 传参
Vue.js 还提供了一个 $event 变量，使用它可以访问原生 DOM 事件。$event 变量可以通过方法传入。
<div id="app2">
<a href="www.163.com" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>
var app2 = new Vue({
el: '#app2',
data: {
count: 0
},
methods: {
openUrl: function (param, event) {
event.preventDefault();
console.log("param:" + param);
}
}
});
输出结果：
param: 被禁用咯
这个示例利用传入的 event 参数，禁用了原有的链接跳转逻辑。
为什么在 HTML 中监听事件
你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。
传统的 WEB 是尽量使用外链式使用 JS，不要把 JS 代码写到 HTML 上；
不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
-
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
-
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
-
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
