vue指令v-on

v-on

Vue.js 的 v-on 指令用于在 Vue 实例中的 HTML 模板上绑定事件监听器。这个指令主要用来监听 DOM 事件，如点击、键盘输入等，并在事件发生时执行 Vue 实例中定义的方法。

v-on的缩写

v-on 指令有一个简短的缩写，即 @ 符号：

    <button @click="methodName">Click me</button>

v-on 的使用增强了 Vue.js 模板的声明性能力，因为它允许你清楚地指定事件处理逻辑所在的位置，同时不需要编写额外的 JavaScript 代码来手动绑定 DOM 事件监听器。在复杂的组件和大规模应用中，这能极大简化代码管理和事件处理。

以下是使用 v-on 的一些示例：

监听点击事件

    <!-- 方法处理器 -->
    <button v-on:click="methodName">Click me</button>
    
    <!-- 内联语句 -->
    <button v-on:click="count++">Click me</button>
    
    <!-- 传递参数 -->
    <button v-on:click="greet('world')">Greet</button>

监听其他事件（例如，键盘事件）

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

事件对象

Vue 会自动向方法传递原生事件对象，如果该方法有一个参数

    <button v-on:click="showEvent">Show Event</button>

    methods: {
      showEvent(event) {
        console.log(event); // 原生 DOM 事件对象
      }
    }

事件修饰符

    <!-- 阻止默认行为（例如，阻止表单提交） -->
    <form v-on:submit.prevent="onSubmit">...</form>
    
    <!-- 只有在事件是从事件绑定的元素本身触发时才触发回调 -->
    <div v-on:click.self="doThat">...</div>

按键修饰符

    <!-- 只有在按下 Enter 键时调用 `submit` 方法 -->
    <input v-on:keyup.enter="submit">