Vue中v-on指令怎么用

这篇文章主要为大家展示了"Vue中v-on指令怎么用"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Vue中v-on指令怎么用"这篇文章吧。

1、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。事件代码可以直接放到v-on后面，也可以写成一个函数。

示例代码如下：

  
{{counter}}
  +1  -10

2、传入event参数

如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。

示例代码如下：

减10...

3、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop：event.stopPropagation，阻止事件冒泡。

• .prevent：event.preventDefault，阻止默认行为

• .capture：事件捕获。

• .self：代表当前这个被点击的元素自身。

• .once：这个事件只执行一次。

• .passive：在页面滚动的时候告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅。

案例1：阻止单击事件继续传播

  
    1111    按钮  

案例2：提交事件不再重载页面

以上是最标准的提交数据的代码，提交完后会自动跳转到百度，但是现在有个需求，我们希望输入完数据后，不会自动跳转到百度，而是通过自己的方法，先处理数据，处理完后，自己指定页面跳转，

代码如下：

这里我们给submit绑定了一个点击事件，并使用.prevent阻止了他的默认行为

以上是"Vue中v-on指令怎么用"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！