目录
e.stopPropagation()、.stop、.self
e.preventDefault()、.prevent
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> 运行结果，截图所示：
分析：
单击按钮一弹出：“v-on”，单击按钮二弹出：“弹出textContent”
标签：count,showClose,app,修饰符,剖析,奥秘,message,true,事件 From： https://blog.csdn.net/chinayun_6401/article/details/139829254