Vue.js 是一种流行的前端框架，它提供了庞大的应用开发工具包，可以使得每个前端开发者能够更好地构建Web应用程序。在Vue.js中，v-on 是一个内置的指令，用于监听DOM事件并且在DOM事件被触发时触发相应的表达式或方法。
在这篇文章中，我们将探讨Vue.js 中使用 v-on 的完整方法和技巧，从而更好地理解和使用该指令。
语法
在Vue.js中使用 v-on 指令非常容易，其基本语法如下：
<button v-on:click="method">Click Me</button>
在这个例子中，我们使用 v-on 指令在一个按钮上监听 click 事件，然后触发一个叫做 'method' 的方法。这个 v-on 指令可以通过简单的语法糖 @click 替换。
监听原生 DOM 事件
Vue.js 中的 v-on 指令可以用于监听任何原生的 DOM 事件。例如，我们可以使用 v-on 指令监听 click、focus、submit、keydown 等事件。
// www.javascriptcn.com code example <!-- 监听 click 事件 --> <button v-on:click="handleClick">Click Me!</button> <!-- 监听 keydown 事件 --> <input v-on:keydown="handleKeydown"> <!-- 监听 form.submit 事件 --> <form v-on:submit.prevent="handleSubmit"> <input type="text" v-model="text"> <button type="submit">Submit</button> </form>
在这些例子中，我们使用 v-on 指令监听不同的DOM事件，然后触发对应事件中定义的方法。
监听自定义事件
除了原生 DOM 事件外，Vue.js 还允许开发者自定义事件并使用 v-on 指令在组件之间传递它们。
假设你要创建一个自定义事件，当点击按钮时触发它：
Vue.component('my-component', {
template: '<button v-on:click="$emit(\'custom-event\')">Click Me!</button>'
})在这个例子中，我们在 Vue.js 组件中定义了一个按钮，并当按钮被点击时触发一个自定义事件 'custom-event'，使用 $emit 方法触发它。
现在，我们可以在父组件中监听这个自定义事件：
<my-component v-on:custom-event="handleCustomEvent"></my-component>
在这个例子中，我们使用 v-on 指令监听名为 'custom-event' 的自定义事件，并在其触发时执行 handleCustomEvent 方法。
移除事件监听
在一些情况下，我们需要在组件销毁之前移除 v-on 对事件的监听，以便减少资源的使用。Vue.js 提供了一个 $off 方法，可以用于从事件监听器中删除指定事件的指定处理函数。
mounted() {
this.$el.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
this.$el.removeEventListener('scroll', this.handleScroll)
}在这个例子中，我们在组件 mount 时，添加了一个 'scroll' 事件监听器，而在组件销毁之前，我们使用 $off 方法移除了这个事件监听器。
修饰符
有时候我们可能需要对事件监听做一些额外的处理，Vue.js 提供了一些修饰符，可以用于增强 v-on 指令的功能。以下是一些常见的修饰符：
- stop- 阻止事件冒泡。
<!-- 阻止点击事件冒泡 --> <div v-on:click.stop="handleClick"> <button>Click Me!</button> </div>
在这个例子中，我们使用 stop 修饰符阻止了点击事件在 div 元素中的冒泡。
- prevent- 阻止默认事件行为。
<!-- 阻止提交表单时的默认行为 --> <form v-on:submit.prevent="handleSubmit"> <input type="text" v-model="text"> <button type="submit">Submit</button> </form>
在这个例子中，我们使用 prevent 修饰符阻止表单提交时的默认行为，以便执行 handleSubmit 方法。
- capture- 添加事件的捕获阶段。
<div v-on:click.capture="handleClick"> <button>Click Me!</button> </div>
在这个例子中，我们使用 capture 修饰符，在元素捕获阶段触发了点击事件，然后执行了 handleClick 方法。
- once- 只触发一次事件。
<button v-on:click.once="handleClick">Click Me Once!</button>
在这个例子中，我们使用 once 修饰符，确保该事件只触发一次，并在第一次点击按钮时执行 handleClick 方法。
在Vue.js 来说，v-on 指令是非常重要的一部分，因为它让我们跟踪DOM事件并做出相应的反应，在开发过程中非常有用。上面我们讨论的内容只是 Vue.js 中 v-on 指令的冰山一角，还有很多非常有意思和实用的技巧值得探究。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d63c9aa941bf7134beec4c