事件处理

一、监听事件

　　用 v-on 指令监听 DOM 事件，并在触发时运行一些 JS 代码：

<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })

　　结果为：

 

 二、事件处理方法

　　许多事件处理逻辑会更复杂，所以直接把 js 代码卸载 v-on 指令中是不可信的。因此 v-on 还可以接受一个需要调用的方案名称：

<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })

　　结果为：

 

三、内联处理器中的方法：

　　除了直接绑定到一个方法，还可以内联 js 语句中调用方法：

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
        el: '#example-3',
        methods: {
            say: function (message) {
                alert(message)
            }
        }
    })

　　结果为：

 

 　　如果需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<div id="test">
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
</div>

new Vue({
        el: '#test',
        methods: {
            warn: function (message, event) {
                // 现在我们可以访问原生事件对象
                if (event) {
                    event.preventDefault()
                }
                alert(message)
            }
        }
    })

　　结果为：

 

 四、事件修饰符：

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

　　为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

　　.stop、.prevetn、.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 只会阻止对元素自身的点击；

五、按钮修饰符：

　　在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<div id="test">
    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="submit">
</div>

var vm = new Vue({
        el: '#test',
        computed: {
            submit: function () {
                alert("触发事件");
            }
        }
    })

　　结果为：

 

 　　也可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

　　按键码：

　　　　keyCode 的时间用法已经被废弃了并可能不会被最新的浏览器支持。

　　　　使用 keyCode attribute 也是允许的：

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

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

.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right

六、系统修饰键：

　　可以用以下修饰符来实现仅按下相应按键时才触发鼠标或键盘事件的监听器：

.ctrl、.alt、.shift、.meta

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