1.监听事件
v-on指令监听DOM事件
2.事件处理器
<!-- $event作为第一个参数默认传入 -->
<button @click="funClick"></button>
<button @click="funClick()"></button>
<!-- 特殊变量$event传入原生DOM事件 -->
<button @click="funClick($event)"></button>
var app = new Vue({
el: "#app",
methods: {
funClick: function (event) {
alert("hello");
if(event){
alert(event.target.tagName);
}
}
}
});
3.事件修饰符
为避免显示调用event.preventDefault()等方法，让事件处理方法保持纯粹逻辑，v-on提供了以下修饰符
- stop
- prevent
- capture
- self
- once(事件只触发一次)
<!-- 阻止冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="doThis"></div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div @click.self="doThat"></div>
串联修饰符要注意顺序，因为相应的代码会以同样的顺序生成
4.键盘修饰符
为监听键盘事件，v-on:key提供了keyCode和以下按键别名
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
<input @keyup.13="submit"/>
<input @keyup.enter="submit"/>
可通过全局config.keyCodes自定义别名
5.修饰键
鼠标键盘监听，组合监听
- ctrl
- alt
- shift
- meta
<!-- Alt + C组合 -->
<input @keyup.alt.67="clear"/>
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething"></div>
鼠标行为监听
- left
- right
- middle
当ViewModel被销毁时，所有事件处理器会自动删除
