Vue之事件修饰符-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144555541

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../lib/vue2/vue.js"></script>

</head>

<body>
  <div id="app">
    <a href="http://www.baidu.com" @click="showInfo">百度一下</a>
  </div>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    const vm = new Vue({
      data() {
        return {
        }
      },
      methods: {
        showInfo() {
          alert('点击了按钮1')
        }
      }
    })
    vm.$mount('#app')
  </script>
</body>

</html>

在这段代码中，默认情况下，点击链接后，除了处理事件，弹出个提醒框外，关闭提醒框后，还会打开百度链接。

如果不想打开百度链接，那么可以使用事件修饰符prevent，即改为

<a href="http://www.baidu.com" @click.prevent="showInfo">百度一下</a>

以下列举常见的事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

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

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