VUE3.x（v-on）常用事件绑定

最新推荐文章于 2024-05-25 17:33:09 发布

月疯

最新推荐文章于 2024-05-25 17:33:09 发布

阅读量762

点赞数

分类专栏：【VUE.js】

本文链接：https://blog.csdn.net/chehec2010/article/details/119712272

版权

【VUE.js】专栏收录该内容

33 篇文章 3 订阅

订阅专栏

<!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>

月疯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫

专栏目录