文章目录[隐藏]
目录
1、监听事件
可以用 v-on
指令监听 DOM
事件,并在触发时运行一些 JavaScript
代码。事件代码可以直接放到v-on后面,也可以写成一个函数。
示例代码如下:
<div id="app"> <p>{{counter}}</p> <button @click="counter += 1">+1</button> <button @click="subtract(10)">-10</button> </div> <script> const app = new Vue({ el: "#app", data: { counter: 0 }, methods: { subtract(value){ this.counter-=value } } }) </script>
2、传入event参数
如果在事件处理函数中,想要获取原生的DOM
事件,那么在html
代码中,调用的时候,可以传递一个$event
参数。
示例代码如下:
<button v-on:click="subtract(10,$event)">减10</button> ... <script> ... methods: { subtract: function(value,event){ this.count -= value; console.log(event); } } ... </script>
3、事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM
事件细节。
为了解决这个问题,Vue.js
为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
- .stop:
event.stopPropagation
,阻止事件冒泡。 - .prevent:
event.preventDefault
,阻止默认行为 - .capture:事件捕获。
- .self:代表当前这个被点击的元素自身。
- .once:这个事件只执行一次。
- .passive:在页面滚动的时候告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅。
案例1:阻止单击事件继续传播
<div id="app"> <div @click="divClick"> 1111 <button @click.stop="btnClick">按钮</button> </div> </div> <script> let app = new Vue({ el: "#app", data: { count: 0 }, methods: { divClick(){ console.log("divClick") }, btnClick(){ console.log("btnClick") } } }); </script>
案例2:提交事件不再重载页面
<div id="app"> <form action=""> <label> <input type="text"> </label> <label> <input type="submit" value="提交"> </label> </form> </div> <script> const app = new Vue({ el: "#app", data: { } }) </script>
以上是最标准的提交数据的代码,提交完后会自动跳转到百度,但是现在有个需求,我们希望输入完数据后,不会自动跳转到百度,而是通过自己的方法,先处理数据,处理完后,自己指定页面跳转,
代码如下:
<div id="app"> <form action="https://www.baidu.com"> <label> <input type="text"> </label> <label> <input type="submit" value="提交" @click.prevent="testClick"> </label> </form> </div> <script> const app = new Vue({ el: "#app", methods: { testClick(){ } } }) </script>
这里我们给submit
绑定了一个点击事件,并使用.prevent
阻止了他的默认行为
到此这篇关于关于Vue v-on指令的使用 的文章就介绍到这了,更多相关Vue v-on指令内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- vue指令v-html使用过滤器filters功能实例
- Vue v-text指令简单使用方法示例
- vue.js指令v-for使用以及下标索引的获取
- 浅谈Vue.js 中的 v-on 事件指令的使用
- Vue.js 中的 v-cloak 指令及使用详解
- vue.js指令v-for使用及索引获取
- Vue中的v-指令使用小结
本文由 华域联盟 原创撰写:华域联盟 » 关于Vue v-on指令的使用
转载请保留出处和原文链接:https://www.cnhackhy.com/83896.htm