这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
目录
- 1.函数绑定
- 2.带参数和$event
- 3.多个函数绑定一个事件
- 4.事件修饰符
- 5.按键修饰符
- 6. 系统修饰键
- .exact 修饰符
- 鼠标按钮修饰符
- 总结
1. 函数绑定
可以用v-on:click="methodName"或者快捷方式 @click="methodName"绑定事件处理函数
@click="methodName()"也可以，@click="methodName"猜测是简写
<div v-on:click="add">{{ count }}</div>
<div @click="add">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count++;
},
},
2. 带参数和$event
可以直接在往事件绑定的函数里传参数和$event
<div @click="set(0, $event)">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count++;
},
set(value, event) {
console.log(event);
this.count = value;
},
},
3. 多个函数绑定一个事件
多个函数直接用逗号分隔，这里即使是没有入参的函数，也要加括号，否则不会执行那个函数
比如<div @click="set(0, $event), log">{{ count }}</div> 只会执行set
<div @click="set(0, $event), log()">{{ count }}</div>
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count++;
},
log() {
console.log("log---");
},
set(value, event) {
console.log(event);
this.count = value;
},
},
4. 事件修饰符
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
<!-- 阻止单击事件继续传播 -->
<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><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div><!-- 点击事件将只会触发一次 能被用到自定义的组件事件上 -->
<a @click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<!-- 尤其能够提升移动端的性能 -->
<div @scroll.passive="onScroll">...</div>
5. 按键修饰符
.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" /><!-- 只有在 `key` 是 PageDown时调用 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />
6. 系统修饰键
事件触发时修饰键必须处于按下状态
.ctrl.alt.shift.meta
<!-- 按住Alt， 按Enter -->
<input @keyup.alt.enter="clear" /><!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符
<button @click.left="log('left cllilck')">鼠标左击</button>
<button @click.right="log('right cllilck')">鼠标右击</button>
<button @click.middle="log('middle cllilck')">鼠标中击</button>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注北冥有鱼的更多内容！
您可能感兴趣的文章:
- Vue触发input选取文件点击事件操作
- vue学习笔记之给组件绑定原生事件操作示例
- Vue 事件处理操作实例详解
- 详解Vue的键盘事件
- Vue事件的基本操作你知道吗
