Vue 事件处理操作实例详解

2020-06-14 06:25:16易采站长站整理
。而单单释放
ctrl
也不会触发事件。如果你想要这样的行为,请为
ctrl
换用
keyCode:keyup.17

6.1 .exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。


<!--Ctrl 或 Alt 或 Shift 被一同按下时会触发-->
<button @click.ctrl="onClick">A</button>
<!--有且只有 Ctrl 被按下时才会触发-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!--没有任何系统修饰符被按下时才会触发-->
<button @click.exact="onClick">A</button>

6.2 鼠标按钮修饰符

2.2.0 新增

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

7 为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

希望本文所述对大家vue.js程序设计有所帮助。