Vue入门笔记——事件处理、按钮绑定、传递信息和v-on：

最新推荐文章于 2024-04-19 18:32:11 发布

new DFP

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量867

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_53472653/article/details/122504217

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理</title>
				<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>	
		<div id="app">
			<h1>hallo你好我是{{name}}</h1>
			<button v-on:click="showInfo">点击发送提示信息</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				name:'new DFP',
			},
			methods:{
				showInfo(){
					alert("你好！！！")
					// console.log(event.target)
				}
			}
		})
	</script>
</html>

给模板定义一个盒子并且button标签绑定了v-on：click，就是点击时候回触发showinfo方法

在vue实例中首先定义了数据然后在methods中定义了触发事件的方法，在这里我们让点击按钮后触发网页提示，提示内容你好

效果

我们看到showinfo方法是没有参数的，但是他默认会传一个事件对象的参数

传递参数的使用

修改showinfo方法

通过事件的对象拿到里面的内容。

			methods:{
				showInfo(event){
					console.log(event.target.innerText)
					// alert("你好！！！")

				}
			}

注意事项区别下列2种函数的书写方式

			methods:{
				showInfo(event){
					console.log(this)
				}
			}

控制台打印的this是vue的对象

			methods:{
				showInfo:(event)=>{
					console.log(this)

				}
			}

控制台打印的this是全局的对象

修改代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理</title>
				<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>	
		<div id="app">
			<h1>hallo你好我是{{name}}</h1>
			<button v-on:click="showInfo1">点击发送提示信息</button><br>
			<button @click="showInfo2($event,66)">点击发送提示信息并且传输信息66</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				name:'new DFP',
			},
			methods:{
				showInfo1(event){
					console.log(this)
					// console.log(event.target.innerText)
					alert("你好777！！！")
					// console.log(event.target)
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					alert("你好888！！！")
					// console.log(event.target)
				}
			}
		})
	</script>
</html>

现在要实现的是点击showinfo2可以传输数据（比如我们要实现删除员工我们就要传员工的id）

细心的朋友发现

这里2个按钮是不同的

@和v-on:效果是相同的

showInfo2($event,66) $event占位符可以传输事件对象，如果我们写了传递的参数但是没写事件对象这样事件对象就会消失，所以我们要加上事件对象。

效果测试

保留了提示信息效果，并且传递了事件对象而且传递我们需要的66参数。

new DFP

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门笔记——事件处理、按钮绑定、传递信息和v-on：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件处理</title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"&.
复制链接

扫一扫