Vue(6)v-on指令的使用
2021/6/28 23:20:34
本文主要是介绍Vue(6)v-on指令的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
v-on
监听事件
可以用 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>
传入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>
事件修饰符:
在事件处理程序中调用 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(6)v-on指令的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南