16-Vue事件处理

Vue 提供了协助我们为标签绑定事件的方法，当我们可以直接用 DOM 原生的方式去绑定事件，绑定也非常方便，而且能让 viewmodel 更简洁，逻辑更彻底。

1. 监听事件的 Vue 处理
Vue 提供了 v-on 指令帮助我们进行事件的绑定，基本的内联事件处理方法：

可以用 v-on 指令监听 dom 事件来触发一些 javascript 代码

<div id="example">    <!--为按钮添加点击事件，执行 counter +=1 的任务-->    <button v-on:click = 'counter += 1'>点击加一</button>    <p>这个按钮被点击了 {{ counter }} 次</p></div>    var vm = new Vue({        el: '#example',        data: {            counter:0        }    })

2. 事件处理方法集成到Vue对象
内联的方式绑定的事件，只能处理简单的事件处理逻辑。
复杂的情况还是封装到 js 中最方便也不容易出错
对象中可以添加 methods 属性，开发者可以把事件处理函数的逻辑放到 methods中

<div id="app">    <p> {{ number }} </p>    <input type = 'button'  value = '增减绑定事件处理器' v-on:click = 'getNumber'>    <input type = 'button'  value= "增加[内联方法调用]"  v-on:click="getNumber()"></div> var app = new Vue({        el: '#app',        data: {            number : 1        },        methods : {            // 事件响应方法的逻辑代码            getNumber : function (e) {             // 不管是内联方法调用还是绑定事件处理器调用，this都指向 vue实例app                this.number += 1            }        }    })

有时也需要在内联语句处理器中访问原生的 DOM 事件，可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">  Submit</button>....methods: {  warn: function (message, event) {    // 现在我们可以访问原生事件对象    if (event) event.preventDefault()    alert(message)  }}

3. 事件修饰符
在事件处理程序中调用 event.preventDefault() 或者 event.stopPropagation() 是非常常见的需求。
尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节

为了解决这个问题，vue.js 为 v-on提供了事件修饰符。通过 . 表示的指令后缀来调用修饰符：
+ .stop
+ .prevent
+ .capture
+ .self
+ .once

<!-- 阻止单击事件冒泡 --><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><!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

• 不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上

4. 键值修饰符
在监听键盘事件时，我们常常需要监听常见的键值。
vue 允许 v-on 在监听键盘事件时添加关键修饰符

// 只要在 keycode 是13时调用 vm.submit()<input v-on:keyup.13 = 'submit'>

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">

全部的按键别名：

.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right

可以通过全局 config.keyCodes 对象自定义键值修饰符别名：

// 可以使用 v-on:keyup.f1Vue.config.keyCodes.f1 = 112

5. 修饰键
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。

.ctrl.alt.shift.meta

注意：在Mac系统键盘上，meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。

<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>

修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。
滑鼠按键修饰符

2.1.0 新增
.left
.right
.middle
这些修饰符会限制处理程序监听特定的滑鼠按键。
为什么在 HTML 中监听事件?

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

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

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

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

4. Vue为了方便大家进行开发，提供了事件的相关的封装，可以让我们方便我们用
5. Vue对事件进行开发，尤其是v-on指令的非常方便的跟Vue对象中methods进行配合进行复杂的事件处理，非常方便。另外事件的事件修饰符和按键修饰符也可以让Vue事件这块锦上添花。