vue事件处理

靠技术吃饭

于 2022-02-23 10:24:20 发布

阅读量305

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端前端框架 vue

本文链接：https://blog.youkuaiyun.com/weixin_58131487/article/details/122157017

版权

这篇博客主要介绍了Vue事件处理的各个方面，包括事件的基本使用，如v-on或@绑定事件，强调methods中函数不应使用箭头函数。接着讲解了事件修饰符，如prevent、stop、once等，以及键盘修饰符的应用，如常见的按键别名和系统修饰键的配合使用。最后提到了一些事件处理的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次都是一些简单事件处理。

一、事件的基本使用

先来一个简单的案例，看看事件的基本使用

<body>
	<div id="root">
		<h2>欢迎来到{
   {name}}学习</h2>
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1（不传参）</button>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			name: '中国',
		},
		methods: {
			showInfo1(event) {
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好!')
			},
			showInfo2(ev

最低0.47元/天解锁文章