事件处理

事件绑定

如何给按钮绑定事件：v-on:click="方法(实参1,...,$event)"

另一种简写：使用@代替v-on:click

Vue的元素methods：{}用于配置每一个方法

$event: event的占位符

event作用：获取触发事件的元素标签

 <body>
 
    <!-- 定义一个vue容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo(55,$event)">点我提示！</button>
    </div>
 
    <script>
        new Vue({
            el: '#root',
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(number,event){
                    alert('同学早上好！');
                    console.log(event.target.innerText)
                }
            }
        })
    </script>
</body>

事件修饰符

prevent stop faw1nce

prevent : 阻止默认事件；

stop : 阻止事件冒泡；

once: 事件只触发一次。

事件冒泡：在嵌套div中，同一个事件在多个div上绑定，事件触发多次。

键盘事件

格式：@keyup.按键名或 @keydown.按键名 = “方法”

按键	按键名
回车	enter
退出	esc
空格	space
换行	tab
上下左右	up down left right

 <body>
    <!-- 定义一个vue容器 -->
    <div id="root">
        <h3>欢迎来到{{name}}学习</h3>
        <input @keydown.tab="showInfo" type="text" placeholder="按下回车键提交">
    </div>
</body>

posted @ 2023-12-28 16:34 gdxstart 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 函数式编程注意点

· JDBC学习笔记

· Vue 事件处理

· 08-Vue核心-事件处理

· Vue的事件

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称： gdxstart
园龄： 2年11个月
粉丝： 4
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

container-simple

事件处理

事件绑定

事件修饰符

键盘事件

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<body>

	<!-- 定义一个vue容器 -->
	<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<button v-on:click="showInfo(55,$event)">点我提示！</button>
	</div>

	<script>
	new Vue({
	el: '#root',
	data: {
	name:'尚硅谷'
	},
	methods: {
	showInfo(number,event){
	alert('同学早上好！');
	console.log(event.target.innerText)
	}
	}
	})
	</script>
	</body>