探索 v-on 之奥秘一：事件及各类修饰符的深度剖析与案例展示

最新推荐文章于 2024-06-28 18:39:53 发布

前端基地

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量768

点赞数 19

分类专栏： vue第一季文章标签： vue.js javascript 前端 html5 css3 elementui 前端框架

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139829254

版权

v-on介绍

v-on事件修饰符

e.stopPropagation()、.stop、.self

capture

e.preventDefault()、.prevent

.once

.passive

v-on介绍

在 Vue 中，v-on 乃是其所提供的用于事件绑定的一种机制，比如要给按钮添加一个单击事件，那么“v-on:click”能够被简写成“@click”。

示例代码如下：

<body>  
    <div id="app">  
        <el-row>  
            <el-col :span="24">  
                <el-button v-on:click="showDataMsg">弹出data中msg数据</el-button>  
                <!-- 简写 -->  
                <el-button type="primary" @click="showTextContent">弹出textContent</el-button>  
                <el-button type="success" @click="showFunArg(msg,$event)">弹出传入的参数</el-button>  
                <!-- 动态事件 -->  
                <el-button @[event]="dynamicEvent">弹出操作的事件</el-button>  
                <!-- 对象语法 -->  
                <el-button @="{ mouseenter: doThis, mouseleave: doThat }">鼠标移入移出</el-button>  
            </el-col>  
            <el-col :span="24">  
                <el-button type="primary" round @click="add">数字加</el-button>  
                <el-button type="text">{
  {count}}</el-button>  
                <el-button type="success" round @click="sub">数字减</el-button>  
            </el-col>            
        </el-row>  
    </div>  
</body>  
<script>  
    const {createApp}=Vue;  
    const app=createApp({  
        data(){  
            return{  
                msg:'v-on',  
                count:0,  
                event:'click'  
            }  
        },  
        methods:{  
            showDataMsg(){  
                this.$message({  
                    showClose: true,  
                    message:this.msg,  
                })  
            },  
            showTextContent(e){  
                this.$message({  
                    showClose:true,  
                    message:e.target.innerText  
                })  
            },  
            showFunArg(arg1,arg2){  
                this.$message({  
                    showClose:true,  
                    message:'参数一：'+arg1  
                })  
                console.log(arguments,arg2.target.innerText);  
            },  
            add(){  
                this.count++;  
            },  
            sub(){  
                this.count--;  
            },  
            dynamicEvent(){  
                this.$message({  
                    showClose:true,  
                    message:'您操作的事件是：'+this.event  
                })  
            },  
            doThis(){  
                this.$message({  
                    showClose:true,  
                    message:'您操作的事件是：mouseenter'  
                })  
            },  
            doThat(){  
                this.$message({  
                    showClose:true,  
                    message:'您操作的事件是：mouseleave'  
                })  
            }  
        }  
    })  
    app.use(ElementPlus);  
    app.mount('#app');  
</script>

运行结果，截图所示：