文本框架：

聊聊Vue中的v-on参数问题

什么是v-on

v-on语法

不带参数的v-on

带参数的v-on

v-on参数示例

示例一：点击按钮弹出提示框

示例二：在输入框中输入文字被实时监听

v-on综合示例

点击按钮改变背景色并弹出提示

总结

---

什么是v-on

v-on 是 Vue 中的指令，用于监听 DOM 事件并触发Vue中指定的方法。在 Vue 中，一个事件可以由多个方法来响应，通过 v-on 指令可以将多个方法绑定到同一个 DOM 元素上。

v-on语法

不带参数的v-on

<button v-on:click="showMessage">点击按钮</button>

v-on:click 监听按钮的点击事件，并绑定 showMessage 方法。

带参数的v-on

<input v-on:keyup.enter="showMessage">

v-on:keyup 监听键盘敲击事件，它可以带一个修饰符，键盘敲击事件修饰符如下：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

该代码监听键盘敲击事件，并且只有在键盘敲击事件为 Enter 的时候才会触发 showMessage 方法。

v-on参数示例

示例一：点击按钮弹出提示框

<button v-on:click="showMessage('Hello World!')">点击按钮</button>

<script>
  let app = new Vue({
    el: '#app',
    methods: {
      showMessage(msg) {
        alert(msg);
      }
    }
  });
</script>

点击按钮后，会弹出提示框："Hello World!"。

示例二：在输入框中输入文字被实时监听

<input v-on:input="showMessage($event)">
<p>{{ message }}</p>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    methods: {
      showMessage(event) {
        this.message = event.target.value;
      }
    }
  });
</script>

输入框中输入任何字符，都会触发 showMessage 方法。通过 $event 传递事件对象，showMessage 会获取 event.target.value （输入框输入的内容），并将其设置到 message 中。最后，将 message 中的值输出到 <p> 标签中。

v-on综合示例

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

<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: '',
      color: 'red',
    },
    methods: {
      changeColorAndShowMessage() {
        this.color = 'blue';
        this.showMessage('You have clicked this button!');
      },
      showMessage(msg) {
        alert(msg);
      }
    }
  });
</script>

该代码监听按钮的点击事件，并且触发 changeColorAndShowMessage 方法。该方法能够改变 <button> 的背景色，并且弹出提示框："You have clicked this button!"。

总结

前文已经详细讲解了 v-on 在 Vue 中的使用方法和相关的参数，它可以被用于一些常见的场景，如监听键盘敲击事件、点击事件、鼠标悬停事件等。通过 v-on 指令，可以轻松的绑定方法和DOM事件。