浅谈Vue.js 中的 v-on 事件指令的使用

介绍

在Vue.js中，v-on指令主要用于监听DOM事件并执行一些JavaScript代码。它可以绑定事件处理函数并在事件触发时自动调用这些函数。

基本语法

在HTML元素中使用v-on指令，绑定DOM事件的处理函数，例如：

<button v-on:click="handleClick">点击我</button>

这里v-on:click表示绑定了click事件，handleClick是一个在Vue实例中定义的处理函数，用于响应click事件。

缩写语法

Vue.js还提供了一种缩写语法，可以将v-on指令简写为@，例如：

<button @click="handleClick">点击我</button>

这样写法和上面的写法是等价的。

事件修饰符

事件修饰符添加在事件处理函数后面，用于改变事件处理函数的默认行为。

.prevent

阻止默认行为，例如：

<form @submit.prevent="handleSubmit">
  <button type="submit">提交</button>
</form>

这里@submit.prevent表示在form元素上绑定了submit事件，并阻止了默认的提交行为。

.stop

阻止事件冒泡，例如：

<div @click="handleClick">
  <button @click.stop>点击我</button>
</div>

这里handleClick是在div元素上绑定的click事件处理函数，而点击按钮时不会触发handleClick函数，因为事件被停止了冒泡。

.self

只有在事件的目标元素上触发时才调用事件处理函数，例如：

<div @click.self="handleClick">
  <button>点击我</button>
</div>

这里handleClick只有在点击div本身时才会执行，点击按钮时不会执行。

.left、.right、.middle

只有在鼠标左键/右键/中键被点击时才会调用事件处理函数，例如：

<div @click.left="handleClick">左键点击</div>
<div @click.right="handleClick">右键点击</div>
<div @click.middle="handleClick">中键点击</div>

监听键盘事件

v-on指令也可以用来监听键盘事件，例如：

<div @keyup.enter="handleSubmit">
  <input type="text">
</div>

这里keyup.enter表示监听按下回车键的事件，并调用handleSubmit函数。

还可以使用键盘码来监听其他按键，例如：

<div @keyup.esc="handleCancel">
  <input type="text">
</div>

这里keyup.esc表示监听按下Esc键的事件，并调用handleCancel函数。

示例说明

示例1：计数器

下面是一个计数器的例子，点击按钮可以实现数字的自增。HTML代码如下：

<div id="app">
  <p>当前计数：{{ count }}</p>
  <button @click="incrementCount">点击我</button>
</div>

JavaScript代码如下：

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    incrementCount: function () {
      this.count++;
    }
  }
});

这里定义了一个名为count的数据属性和一个名为incrementCount的方法，用于实现计数器的逻辑。当点击按钮时，v-on指令会自动调用incrementCount方法。

示例2：表单验证

下面是一个表单验证的例子，点击提交按钮可以验证用户名和密码是否为空。HTML代码如下：

<div id="app">
  <form @submit.prevent="handleSubmit">
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" v-model="password">
    <br>
    <button type="submit">提交</button>
  </form>
  <p v-if="submitted && !username">请输入用户名</p>
  <p v-if="submitted && !password">请输入密码</p>
</div>

JavaScript代码如下：

new Vue({
  el: '#app',
  data: {
    username: '',
    password: '',
    submitted: false
  },
  methods: {
    handleSubmit: function () {
      this.submitted = true;
      if (!this.username || !this.password) {
        return;
      }
      // 提交表单的逻辑
    }
  }
});

这里定义了两个名为username和password的数据属性和一个名为handleSubmit的方法，用于实现表单验证的逻辑。当点击提交按钮时，v-on指令会自动调用handleSubmit方法，并阻止表单的默认提交行为。如果用户名或密码为空，则会在页面上显示请输入用户名或请输入密码的提示信息。