前言
Vue.js 是一款非常流行的前端开发框架，它提供了一些非常方便的指令和组件，其中就包括 v-on 指令，这个指令用于绑定事件。
v-on 指令可以将某个事件与一个方法关联起来，当该事件触发时，该方法将会被自动调用。本文将详细介绍如何使用 v-on 绑定事件。
v-on 指令语法
在 Vue.js 中，通过 v-on 指令来绑定事件。我们通常用 @ 符号来简写 v-on，比如 @click 就代表着 v-on:click。
v-on 指令有两个必填参数：
-- -------------------- ---- -------
---- -- ---
--------- --------------------------------
---- -- ---
-------- -
------------- -
-- ----
-
-其中，@click 代表着绑定了 click 事件，handleClick 则是我们指定的回调函数。
传递参数
在事件回调函数中，我们可以通过 $event 参数来访问事件对象。例如，下面的代码中，我们通过 v-on 指令将 message 传递给了 handleEvent 方法。
-- -------------------- ---- -------
---- -- ---
--------- -----------------------------------------------
---- -- ---
-------- -
-------------------- ------ -
-------------------- -- -----------
------------------ -- ---------- --
-
-除了 $event，我们还可以通过内联表达式的方式向回调函数中传递额外的参数，例如：
<v-button @click="handleEvent('hello,world', $event)"></v-button>在 handleEvent 方法中，我们就可以操作这两个参数了。
修饰符
在 Vue.js 中，提供了一些修饰符，用于处理事件的行为。下面是一些常用的修饰符：
.prevent
阻止默认事件
-- -------------------- ---- -------
---- -- ---
----- ---------------------------------------
---- -- ---
-------- -
--------------- -
-- ----
-
-.stop
阻止事件冒泡
-- -------------------- ---- -------
---- -- ---
------- ----------------------
------ ----------------------------------
---------
---- -- ---
-------- -
-------------- -
------------------- ---------
--
------------- -
------------------ ---------
-
-.self
只在当前元素触发
-- -------------------- ---- -------
---- -- ---
--------- -------------------------------------
---- -- ---
-------- -
------------- -
-- ----
-
-.once
事件只触发一次
-- -------------------- ---- -------
---- -- ---
--------- -------------------------------------
---- -- ---
-------- -
------------- -
-- ----
-
-示例代码
-- -------------------- ---- -------
----------
-----
--------- ------------------------ -------------- -------------
--------- ------------------------------ --------------- ----- -------------
--------- -------------------------------- -------------- ---- -- -------------
--------- ---------------------------- -------------- -- -- -------------
------
-----------
--------
------ ------- -
-------- -
-------------- -- -
-------------- -- -------- --- ------------- ------------ -- ---------
-
-
-
---------总结
通过本文的介绍，我们可以看到，在 Vue.js 中使用 v-on 绑定事件非常方便。同时，我们还可以通过修饰符更有效地处理事件的行为。希望这篇文章对大家学习 Vue.js 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457eafb968c7c53b0a79d6e