Vue中v-on的基础用法、参数传递和修饰符的示例详解

下面我会详细讲解“Vue中v-on的基础用法、参数传递和修饰符的示例详解”。

1. v-on的基础用法

v-on是Vue的事件绑定指令，它可以监听指定的DOM事件，并在事件触发时执行指定的Vue方法。v-on的基础用法格式为：v-on:事件名="方法名"，其中事件名可以是任意合法的DOM事件名，方法名则是Vue实例的一个方法名。
示例代码：

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

new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello Vue!')
    }
  }
})

上述代码中，当用户点击按钮时，Vue会执行sayHello方法，并弹出一个对话框。

2. 参数传递

有时我们需要在事件触发时传递一些参数给Vue的方法，这时可以使用v-on指令的参数传递功能。传递参数的方式有两种，一种是直接在v-on指令中使用$event变量，另一种则是使用JavaScript表达式。
示例代码：

<button v-on:click="saySomething('Hello Vue!')">点击我</button>
<button v-on:click="showMessage($event, 'Hello!')">点击我</button>

new Vue({
  el: '#app',
  methods: {
    saySomething: function(message) {
      alert(message)
    },
    showMessage: function(event, message) {
      event.preventDefault() // 阻止默认行为，比如链接跳转
      alert(message)
    }
  }
})

上述代码中，第一个按钮会直接调用saySomething方法并传递参数；第二个按钮会调用showMessage方法并传递Vue事件对象$event和参数。

3. 修饰符

修饰符是v-on指令的一个重要特性，它可以对事件的触发行为进行进一步的控制，比如阻止事件冒泡、阻止默认行为、使用按键别名等。修饰符需要在事件名后面加点号，如：v-on:事件名.修饰符1.修饰符2。
示例代码：

<div v-on:click.stop.prevent="onDivClick">点击我</div>
<input v-model="message" v-on:keyup.enter="onEnter">

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onDivClick: function() {
      alert('Div被点击了')
    },
    onEnter: function() {
      alert('Enter键被按下了')
    }
  }
})

上述代码中，第一个div会阻止事件冒泡并阻止默认行为，只会触发onDivClick方法；第二个input会监听键盘的keyup事件，并使用enter修饰符指定只响应Enter键的按下事件，触发onEnter方法。

以上是“Vue中v-on的基础用法、参数传递和修饰符的示例详解”的完整攻略。希望对你有所帮助！