【Vue.JS】Vue.JS 中的修饰符

原始代码（修饰符将在此代码基础上测试）

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<div id="demo">
	<a href="https://www.github.com">www.github.com</a>
    <div id="div01" @click="showId()" style="width:200px; height:200px; background-color:brown">
        <div id="div02" @click="showId()" style="width:150px; height:150px; background-color:yellow">
            <div id="div03" @click="showId()" style="width:100px; height:100px; background-color:green">
                <div id="div04" @click="showId()" style="width:50px; height:50px; background-color:plum"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var demo = new Vue({
        el: '#demo',
        methods: {
            showId: function () {
                alert(event.currentTarget.id);
            },
            showMessage: function () {
                alert('禁止访问');
            }
        },
    })
</script>

以上代码还未使用任何修饰符。
效果如下(标准冒泡)：

• 点击链接 ： 跳转 github 首页
• 点击 div01 ： 弹出 div01
• 点击 div02 ： 弹出 div02 – div01
• 点击 div03 ： 弹出 div03 – div02 – div01
• 点击 div04 ： 弹出 div04 – div03 – div02 – div01

Vue.JS 中的修饰符

事件修饰符

• .prevent

  阻止默认提交后的重新加载

  • 修改 a 标签如下：

  <a href="https://www.github.com" @click.prevent>www.github.com</a>
  或者
  <a href="https://www.github.com" @click.prevent="showMessage()">www.github.com</a>
  

  • 点击效果：超链接无法跳转。第二种写法弹出"禁止访问"提示。

• .once

  事件只触发一次

  • 修改 div01 标签如下：

  <div id="div01" @click.once="showId()" style="width:200px; height:200px; background-color:brown">
  

  • 点击 div01 : 第一次点击弹出 div01， 然后再点击无效果。

• .self

  监听触发的事件是否直接作用于当前元素。如果不是则跳过

  • 修改 div02 标签如下：

  <div id="div02" @click.self="showId()" style="width:150px; height:150px; background-color:yellow">
  

  • 点击 div01 ： 弹出 div01
  • 点击 div02 ： 弹出 div02 – div01
  • 点击 div03 ： 弹出 div03 – div01
  • 点击 div04 ： 弹出 div04 – div03 – div01

• .capture

  事件冒泡时，优先触发带有该修饰符的元素（多个时，由内向外），然后触发本身，最后冒泡规则触发其它事件。

  • 修改 div02 div03 标签如下：

  <div id="div02" @click.capture="showId()" style="width:150px; height:150px; background-color:yellow">
          <div id="div03" @click.capture="showId()" style="width:100px; height:100px; background-color:green">
  

  • 点击 div01 ： 弹出 div01
  • 点击 div02 ： 弹出 div02 – div01
  • 点击 div03 ： 弹出 div02 – div03 – div01
  • 点击 div04 ： 弹出 div02 – div03 – div04 – div01

• .stop

  阻止事件的冒泡。

  • 修改 div02 标签如下：

  <div id="div02" @click.stop="showId()" style="width:150px; height:150px; background-color:yellow">
  

  • 点击 div01 ： 弹出 div01
  • 点击 div02 ： 弹出 div02
  • 点击 div03 ： 弹出 div03 – div02
  • 点击 div04 ： 弹出 div04 – div03 – div02

按键修饰符

• 标准 keycode 指定

  具体规则参照【keycode对照表】
  常用的如 enter – 13； backspace – 8 等

• 自定义 keycode 指定

  使用以下代码进行全局定义，定义后即可调用，调用方法同上

  Vue.config.keyCodes.enter = 100
  

• 快捷名称指定

  Vue 提供了一些快捷的名称，可以直接使用 名称 调用

  • .enter
  • .tab
  • .delete
  • .space
  • .ctrl
  • .alt
  • .shift
  • .meta
  • .up
  • .down
  • .left
  • .right
• 按键修饰符使用

与事件修饰符相同，按键修饰符也支持串联使用(以下示例中的事件并未定义)

    <!-- Ctrl + S -->
    <input type="text" @keyup.ctrl.83="saveMessage()">
    <!-- 按住 ctrl 点击鼠标 -->
    <div @click.ctrl="multiCheck()"></div>