怎样在 Vue 中使用事件修饰符 ?

Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰符. 下面是 vue 的 事件修饰符 和 按键修饰符.

事件修饰符

<!-- 阻止单击事件冒泡 -->
<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 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

<!-- 所有按键别名 -->
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

下面是一个实际的例子, 执行顺序为: 最外层 > 第二层 > 最里层 > 第三层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
  <style>
      .style1 {
          width: 100px; height: 100px; background-color: tomato;
          text-align: center; line-height: 100px; color: white;
          cursor: pointer;
      }
  </style>
</head>
<body>
    <div id="app">
        <div class="style1" v-on:click.capture="act1">
            <!-- 最外层 -->
            <div v-on:click.capture="act2">
                <!-- 第二层 -->
                <div v-on:click="act3">
                    <!-- 第三层 -->
                    <div v-on:click="act4">
                        <!-- 最里层 -->
                        点击
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            methods: {
                act1: function () { alert("最外层") },
                act2: function () { alert("第二层") },
                act3: function () { alert("第三层") },
                act4: function () { alert("最里层") }
            }
        })
    </script>
</body>
</html>

怎样在 Vue 中使用 事件修饰符 ?

怎样在 Vue 中使用事件修饰符 ?