大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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
阻止了他的默认行为
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164864.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...