vue中的事件修饰符，以v-on的事件修饰符为例-CFANZ编程社区

一、简介

事件修饰符处理了许多DOM事件的细节，帮助我们快速的完成一些事件动作。

例如v-on的修饰符有以下：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

二、案例

案例中用了事件修饰符prevent阻止默认事件。

①index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>Events</h1>
        <!-- <button @click="age++">add a year</button>
      <button v-on:click="age--">subtract a year</button> -->
        <button @click.once="add(1)">加1年</button>
        <button v-on:click="subtract(1)">减1年</button>
        <button @dblclick="add(10)">加10年</button>
        <button v-on:dblclick="subtract(10)">减10年</button>
        <p>我的年龄是: {{ age }}</p>

        <!-- 鼠标事件 -->
        <div id="canvas" v-on:mousemove="updateXY">{{ x }} , {{ y }}</div>

        <!-- 事件修饰符 -->
        <p>
            <a @click.prevent="handleClick" href="http://www.baidu.com">百度</a>
        </p>
    </div>
</body>
<script src="app.js"></script>

</html>

②app.js

// 实例化vue对象
new Vue({
  el: '#vue-app', // element
  data() {
    return {
      age: 30,
      x: 0,
      y: 0
    };
  },
  methods: {
    add(inc) {
      this.age += inc;
    },
    subtract(dec) {
      this.age -= dec;
    },
    updateXY(event) {
      // console.log(event);
      this.x = event.offsetX;
      this.y = event.offsetY;
    },
    handleClick() {
      alert('hello');
    }
  }
});

③styles.css

#canvas {
  width: 600px;
  padding: 200px 20px;
  text-align: center;
  border: 1px solid #333;
}

显示效果如图：
在这里插入图片描述