Vue v-on,Onvue
本文主要介绍Vue v-on指令的一些使用场景，比如监控事件、传入事件参数、事件修饰符的一些场景。我们来看看具体的使用方法。有需要的朋友可以参考一下。
目录
1、监听事件2、传入事件参数3、事件修改器情况1:阻止点击事件继续传播情况2:提交事件不重新加载页面。
1、监听事件
您可以使用v-on指令来监听DOM事件，并在被触发时运行一些JavaScript代码。事件代码可以直接放在v-on之后，或者作为函数编写。
示例代码如下：
div id=应用程序
p{{counter}}/p
按钮@click=counter=1 1/button
button @click=减去(10)-10/button
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
计数器：0
},
方法：{
减去(值){
this . counter-=值
}
}
})
/脚本
2、传入event参数
如果希望在事件处理函数中获得原生DOM事件，可以在html代码中调用它时传递一个$event参数。
示例代码如下：
按钮v-on: click= subtract (10，$ event)减去10/button
.
脚本
.
方法：{
减法：函数(值，事件){
this.count -=值；
console.log(事件)；
}
}
.
/脚本
3、事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的要求。虽然我们可以很容易地在方法中实现这一点，但方法最好只有纯数据逻辑，而不是处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修改器。如前所述，修饰符由点号开头的指令后缀表示。stop:stop:event . stop传播防止事件冒泡。防止：event.preventDefault，防止默认行为。捕获：事件捕获。self:表示当前单击的元素本身。once:该事件只执行一次。被动：当页面滚动时告诉浏览器不会阻止默认行为，从而使滚动更加平滑。
案例1：阻止单击事件继续传播
div id=应用程序
div @click=divClick
1111
Button @click.stop=btnClick 按钮/按钮
/div
/div
脚本
let app=new Vue({
埃尔： #app ，
数据：{
计数：0
},
方法：{
divClick(){
console.log(divClick )
},
btnClick(){
console.log(btnClick )
}
}
});
/脚本
案例2：提交事件不再重载页面
div id=应用程序
表单操作=
标签
输入类型=文本
/标签
标签
输入类型=提交值=提交
/标签
/表单
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
}
})
/脚本
以上是提交数据最标准的代码。提交后会自动跳转到百度，不过现在有需求了。我们希望输入数据后，不要自动跳转到百度，而是先用自己的方法处理数据。处理后我们会自己指定页面跳转。
代码如下：
div id=应用程序
form action=https://www.baidu.com
标签
输入类型=文本
/标签
标签
type= submit value= submit @ click . prevent= test click
/标签
/表单
/div
脚本
const app=new Vue({
埃尔： #app ，
方法：{
testClick(){
}
}
})
/脚本
这里我们绑定了一个点击事件来提交和使用。防止阻止他的违约行为。
关于Vue v-on指令使用的这篇文章到此为止。有关Vue v-on指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。