https://jsrun.pro/ZLfKp/edit ### 监听事件 可以用v-on指令监听DOM事件，　并在触发时运行一些JavaScript代码。 ``` <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ``` ### 事件处理方法 除了把JS代码写在指令中，v-on还可以接收调用的方法名。 ### 内联处理器中的方法 除了绑定方法名， 还可以内嵌JS调用方法 ``` <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> ``` 使用$event 特殊变量，可以在内联语句处理器中访问原始的DOM事件。 ``` <button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ``` ``` // ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } } ``` ### 事件修饰符 在时间处理程序调用， `event.preventDefault()`或`event.stopPropagation()` 是非常常见的需求， 但是更好的方式是： 方法只有纯粹的数据逻辑， 而不是去处理DOM事件细节。 为此， Vue为v-on提供了事件修饰符，由点开头的指令前缀来表示。包括： * .stop * .prevent * .capture * .self * .once * .passive ``` <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> ``` 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 #### .once 2.1.4新增， 触发一次， .once 修饰符还能被用到自定义的组件事件上。 ``` <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> ``` #### 2.3.0 新增 Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。 ``` <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> ``` 这个 .passive 修饰符尤其能够提升移动端的性能，不要把`.passive`和`.prevent`一起使用，因为`.prevent`将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive`会告诉浏览器你*不*想阻止事件的默认行为。 ### 按键修饰符 Vue 允许为`v-on`在监听键盘事件时添加按键修饰符 ``` <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> ``` 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 ``` <input v-on:keyup.page-down="onPageDown"> ``` 在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。 #### 按键码 keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。 ``` <input v-on:keyup.13="submit"> ``` 按键的别名： * .enter * .tab * . delete (包含删除和退格) * .esc * .space * .up * .down * .left * .right ### 系统修饰键 2.1.0 新增 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器 * `.ctrl` * `.alt` * `.shift` * `.meta` ``` <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> ``` 警告： 请注意修饰键与常规按键不同，在和`keyup`事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住`ctrl`的情况下释放其它按键，才能触发`keyup.ctrl`。而单单释放`ctrl`也不会触发事件。如果你想要这样的行为，请为`ctrl`换用`keyCode`：`keyup.17`。 #### .exact修饰符 2.5.0 新增 `.exact`修饰符允许你控制由精确的系统修饰符组合触发的事件。 ``` <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button> ``` ### 鼠标按钮修饰符 提示： 2.2.0 新增 * `.left` * `.right` * `.middle`