使用 Vue 处理点击事件

Question

Vue 的 v-on 指令是您 在 Vue 中处理事件的 方式。 这 v-on:click 指令允许您将单击事件处理程序附加到元素。 例如，每次单击“添加”按钮时，下面的 Vue 应用程序都会更新。

// Click the "Add" button twice to make the <h1> show
// "Row row row your boat"
const app = new Vue({
  data: () => ({ message: 'Row' }),
  template: `
  <div>
    <h1>{{message}} your boat</h1>
    <button v-on:click="message += ' row'">Add</button>
  </div>
  `
});

如果 v-on:click 对你来说太冗长了，Vue 也支持 @click ，这是一种方便的简写。

const app = new Vue({
  data: () => ({ message: 'Row' }),
  // `@click` is the same thing as `v-on:click`
  template: `
    <div>
      <h1>{{message}} your boat</h1>
      <button @click="message += ' row'">Add</button>
    </div>
  `
});

方法和 $event

执行 表达式 Vue v-on:click 有几个附加功能。 首先，Vue 注入了一个 $event 你的变量 v-on:click 代码可以使用。 $event 是对 原版 DOM 事件 的引用。

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <button v-on:click="myMethod($event)">Click Me</button>
    </div>
  `
});

其次，如果您的表达式计算为一个函数，Vue 将执行该函数并自动传递 $event 作为第一个参数。 例如下面的代码等价于上面的代码，因为因为 myMethod 是一个函数，Vue 会调用它并传递 $event。

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <button v-on:click="myMethod">Click Me</button>
    </div>
  `
});

常用修饰符

使用点击处理程序时有几个常见任务。 例如，您可能想调用 preventDefault() 防止用户点击时重定向 a 标记，或忽略子元素上的点击事件。 Vue 的事件修饰符 可以为您处理这些任务以及其他一些常见任务。

例如， v-on:click.prevent 自动调用 $event.preventDefault() 为你。 所以下面的应用程序将有一个 <a> 标签。 单击时不会 重定向用户的

const app = new Vue({
  data: () => ({}),
  methods: {
    myMethod: function myMethod(ev) {
      console.log(ev); // MouseEvent { ... }
    }
  },
  template: `
    <div>
      <a v-on:click.prevent="myMethod($event)" href="/">Click Me</a>
    </div>
  `
});

.prevent 是 修饰符 _ v-on:click . 另一个方便的修饰符是 .self ，它告诉 Vue 只评估 v-on:click 如果元素本身被单击，而不是其子元素之一。例如Vue 只调用下面的 v-on:click 当您单击外部处理程序时 div ，而不是内部 div .

const app = new Vue({
  data: () => ({}),
  methods: {
    alert: function() {
      alert('Clicked Outer');
    }
  },
  template: `
    <div>
      <div class="outer" v-on:click.self="alert()">
        Outer
        <div class="inner">Inner</div>
      </div>
    </div>
  `
});