vue.js事件处理器

事件监听可以使用v-on指令：

v-on的基本使用


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">
			<div @click="change()">点击div>  
			<input @input="changeinput" />
		div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						
					}
				},
				methods:{
					change(){
						console.log('1111');
					},
					changeinput(){
						console.log('222');
					}
				}
				
			})
		script>
	body>
html>

运行效果

v-on的参数传递


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">
			
			<button @click="btnClick">按钮1button>
			<button @click="btnClick()">按钮2button>
 
			
			<button @click="btnClick(123)">按钮3button>
			<button @click="btnClick()">按钮4button>
 
			
 
			
			
 
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
 
					}
				},
				methods: {
					/* btnClick() {
						console.log("点击XXX");
					}, */
 
					/* 	btnClick(val) {
							console.log(`点击了${val}`);
						} */
 
					/* btnClick(e) {
						console.log(e);
					} */
 
					btnClick(e, val) {
						console.log(e + '-----' + val);
					}
				}
			})
		script>
	body>
html>

运行效果

注意：
如果我只要传递e事件那么可以不写参数，当然也可以写一个参数叫$event

           事件传多个参
           如果我要传递多个参数那么既要写参数，也要写$event,方法中用e和形参进行接收

methods: {
                   /* btnClick() {
                       console.log("点击XXX");
                   }, */

                   /*    btnClick(val) {
                           console.log(`点击了${val}`);
                       } */

/* btnClick(e) {
console.log(e);

v-on的事件修饰词
html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
		<style>
			.div {
				width: 200px;
				height: 100px;
				background: #f00;
				overflow: scroll;
			}
		style>
	head>
	<body>
		<div id="app">
			<div @scroll="onScroll" class="div">滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为)
				将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发div>
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {}
				},
				methods: {
					divClick() {
						console.log('点击了div');
					},
					btnClick() {
						console.log('点击了btn');
					},
					change() {
						console.log('阻止了默认行为');
					},
					change2() {
						console.log('阻止了默认行为也阻止了冒泡');
					},
					show(msg) {
						console.log(msg);
					},
					showself() {
						console.log('我是点击自身才触发');
					},
					doThis() {
						console.log('点击了a');
					},
					onScroll() {
						for (let i = 0; i < 5000; i++) {
							console.log('@');
						}
						console.log('333333');
					}
				}
			})
		script>
	body>
html>
注意：

   1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() 常用




           2. .prevent 调用event.preventDefault阻止默认行为常用
           去百度

           3. 修饰符可以串联常用


                   去百度


           4. 添加事件监听器时使用事件捕获模式不常用


               div1外面


                   div2里面




           5. 只当在 event.target 是当前元素自身时触发处理函数不常用





           6. 点击事件将只会触发一次不常用
           点击触发

           7. .passive 修饰符尤其能够提升移动端的性能。不常用


               滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发

相关阅读:
WebGIS瓦片基础原理
力扣（LeetCode）178. 分数排名（2022.06.27）
智慧公厕的原理与优势，了解一种更智能的卫生设施
MyBatis 学习（七）之缓存
网页黑白滤镜
nginx系列第二篇：nginx源码调试
Windows|MySql下载与安装教程
Jenkins List Git Branches插件构建选择指定git分支
springboot+vue企业废物回收员工任务管理系统java
神探大战观影解说

原文地址：https://blog.csdn.net/m0_68633696/article/details/126143929