VUE3.x（v-on）常用事件绑定
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE3.x（v-on）常用事件绑定相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
#myp{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="show()">按钮1</button>
<!-- 方法没有参数的时候可以省略括号 -->
<button v-on:click="show">按钮2</button>
<!-- 可以使用@替换v-on： -->
<button @click="show">按钮3</button>
<hr>
<p>{{ msg }}</p>
<!-- 点击之后改变p的内容，行内表达式 -->
<!-- 方式一 -->
<button @click="change">修改msg</button>
<!-- 方式二 只有一行代码的时候-->
<button @click="msg='world'">修改msg</button>
<!-- 事件绑定的回调的参数 -->
<button @click="write("aaa")">传参数1</button>
<button @click="write(msg)">传参数2</button>
<!-- 将$event作为实参，表示事件对象 -->
<button @click="write($event)">传参数3</button>
<input type="text" @input="write($event.target.value)" />
<hr>
<!-- 按键的修饰符 -->
<!-- 当用户按下u的时候才会触发 -->
<input type="text" @keyup.u="print($event)" />
<!-- 功能修饰符 -->
<button @click.once="show">只触发一次</button>
<!-- 阻止事件的默认行为 -->
<button @contextmenu.prevent="show">右建点击</button>
</div>
Vue.createApp({
<!-- 数据仓库 -->
data(){
return{
msg:"hello"
}
},
<!-- 方法仓库 -->
method:{
show(){
console.log(111)
}，
change(){
<!-- console.log(this) -->
this.msg="world"
},
write(args){
console.log(args)
},
print(e){
console.log(111)
}
}
}).mount("#app")
</body>
</html>
以上是关于VUE3.x（v-on）常用事件绑定的主要内容，如果未能解决你的问题，请参考以下文章