vue---事件处理

在下~厉飞雨

于 2024-04-19 03:07:27 发布

阅读量356

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/mwm2378/article/details/137944336

版权

本文详细介绍了Vue.js中的事件绑定方法（v-on与@），如何在methods中正确配置事件处理函数，以及事件修饰符的使用，包括prevent、stop、once、capture、self和passive。此外，还涵盖了键盘事件的常见用法和自定义键名的方法。

摘要由CSDN通过智能技术生成

事件处理

1.事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5.@click=“demo” 和 @click=“demo()” 效果一致，但后者可以传参；

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

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'School',
			},
			methods:{
			    //默认参数是事件对象
				showInfo1(event){
					console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
				},
				//接收其他参数
				//函数接收参数的顺序与调用函数传参的顺序一致
				showInfo2(number，event){
					console.log(number，event)//66，事件对象
				}
			}
		})
	</script>

2.事件修饰符

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<body>
		<div id="root">
			<!-- 阻止默认事件（常用）  此时a标签并不会跳转链接    -->
			<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用）    点击按钮，事件不会冒泡到div上-->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用）   点第二次事件不会触发-->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<!-- 事件默认处理方式：事件捕获=》事件冒泡（处理事件）-->
			<!-- 加上.capture后：事件捕获（处理事件）=》事件冒泡-->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件；也可阻止事件冒泡 -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->			
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

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

		new Vue({
			el:'#root',		
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>