学习笔记《Vue 事件处理》

看到同事写的代码，「@submit.native.prevent」一下子抓不到含义，发现 Vue 在 2.0 以后添加了一些「事件（Event）」方面的功能，学习一下，以作备忘

真相：
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面

注册

Greet // greet 是 greet() 的简写
Say hi
 // original DOM event
 // for short

事件修正符

...


...

按键修正符

按键修正符支持方便的扩展和自定义，默认的有：

.enter（键盘）
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right
.ctrl（快捷键）
.alt
.shift
.meta
.left（鼠标）
.right
.middle
.native - listen for a native event on the root element of component.
.passive - (2.3.0+) attaches a DOM event with { passive: true }

除了以上几个以外，所有定义在 JavaScript 中的 KeyboardEvent.key 都可以被直接使用（转换为 kebab-case 格式）

Do something


A

A

（在组件上）自定义事件

Listen to an event using $on(eventName)
Trigger an event using $emit(eventName) （$emit 也可以从子组件中触发父组件中注册的事件）

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')

绑定系统原生事件的时候，需要加 .native 修正符

疑问

.passive 这个修正符的意思我没有 get 到：

A seemingly minor, but incredibly welcome change in the latest Vue release is the addition of the .passive event modifier to v-on. This allows an event to be bound in such a way that it explicitly says that it won’t cancel the event. This translates to a significant performance improvement on mobile for certain events, such as wheel, touchstart, and touchmove.

We’ll be covering the passive event modifier in JavaScript in the next few days.