9、事件处理

监听事件

可以用v-on指令监听dom事件，并在触发时执行一些javaScript代码

示例：

<div id="test1" >
    <div>{{count}}</div>
    <button v-on:click="count++">add</button>
</div>

new Vue({
    el:"#test1",
    data:{
        count:1
    }
})

事件处理方法

许多事件有非常复杂的处理逻辑，除了吧逻辑写在v-on指令中以外，还可以直接在指令中写方法名称来调用方法。

示例：

<div id="test2" >
    <div>{{count}}</div>
    <button v-on:click="add">add</button>
</div>

var test2=new Vue({
    el:"#test2",
    data:{
        count:1
    },
    methods:{
        add:function(event){
            this.count++;
            //event是原生dom事件
            if(event) {
                alert(event.target.tagName)
            }
        }
    }
})
//这里可以直接调用方法
test2.count++;

内联处理器中的方法

除了直接绑定一个方法，也可以在内联Javascript中调用方法：

<div id="test3" >
    <button v-on:click="msg('add')">add</button>
    <button v-on:click="msg('del')">del</button>
</div>

new Vue({
    el:"#test3",
    data:{
    },
    methods:{
        msg:function(text){
            alert(text);
        }
    }
})

有时需要在内联的语句处理中访问原始的dom事件，可以使用特殊变量 $event 传入方法

<div id="test4" >
    <button v-on:click="msg('add',$event)">add</button>
    <button v-on:click="msg('del',$event)">del</button>
</div>

new Vue({
    el:"#test4",
    data:{
    },
    methods:{
        msg:function(text,event){
            //访问原生事件对象
            if(event){
                event.preventDefault();
            }
            alert(text);
        }
    }
})

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

Vue.js 为 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 只会阻止对元素自身的点击。

2.1.4 新增

<a v-on:click.once="doThis"></a>
不像其他只能对原生dom事件起作用的修饰符，.once能被用到自定义的组件事件上

2.3.0 新增

Vue还对应addEventListener中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个.passive能大幅提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

监听键盘事件时，经常会需要检查详细的键，Vueu允许为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 的事件用法已经被废弃了，可能不会被最新的浏览器支持。

使用keyCode特性

< input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue提供了绝大部分常用的按键码别名:

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

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

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

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

系统修饰键

2.1.0新增

如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 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事件一起使用时，事件触发时按键必须处于按下状态，只有按住ctrl并且释放其他按键的时候才能触发keyup.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>