• vue.js事件处理器

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

    v-on的基本使用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<div @click="change()">点击div>  
    11. 			<input @input="changeinput" />
    12. 		div>
    13. 		<script>
    14. 			const vm = new Vue({
    15. 				el:'#app',
    16. 				data(){
    17. 					return {
    18. 						
    19. 					}
    20. 				},
    21. 				methods:{
    22. 					change(){
    23. 						console.log('1111');
    24. 					},
    25. 					changeinput(){
    26. 						console.log('222');
    27. 					}
    28. 				}
    29. 				
    30. 			})
    31. 		script>
    32. 	body>
    33. html>

    运行效果

    v-on的参数传递

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			
    11. 			<button @click="btnClick">按钮1button>
    12. 			<button @click="btnClick()">按钮2button>
    13.  
    14. 			
    15. 			<button @click="btnClick(123)">按钮3button>
    16. 			<button @click="btnClick()">按钮4button>
    17.  
    18. 			
    19.  
    20. 			
    21. 			
    22.  
    23. 		div>
    24. 		<script>
    25. 			const vm = new Vue({
    26. 				el: '#app',
    27. 				data() {
    28. 					return {
    29.  
    30. 					}
    31. 				},
    32. 				methods: {
    33. 					/* btnClick() {
    34. 						console.log("点击XXX");
    35. 					}, */
    36.  
    37. 					/* 	btnClick(val) {
    38. 							console.log(`点击了${val}`);
    39. 						} */
    40.  
    41. 					/* btnClick(e) {
    42. 						console.log(e);
    43. 					} */
    44.  
    45. 					btnClick(e, val) {
    46. 						console.log(e + '-----' + val);
    47. 					}
    48. 				}
    49. 			})
    50. 		script>
    51. 	body>
    52. html>

    运行效果    

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

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

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

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

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

    v-on的事件修饰词                                                                                                                     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 		<style>
    8. 			.div {
    9. 				width: 200px;
    10. 				height: 100px;
    11. 				background: #f00;
    12. 				overflow: scroll;
    13. 			}
    14. 		style>
    15. 	head>
    16. 	<body>
    17. 		<div id="app">
    18. 			<div @scroll="onScroll" class="div">滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发滚动事件的默认行为 (即滚动行为)
    19. 				将会立即触发滚动事件的默认行为 (即滚动行为) 将会立即触发div>
    20. 		div>
    21. 		<script>
    22. 			const vm = new Vue({
    23. 				el: '#app',
    24. 				data() {
    25. 					return {}
    26. 				},
    27. 				methods: {
    28. 					divClick() {
    29. 						console.log('点击了div');
    30. 					},
    31. 					btnClick() {
    32. 						console.log('点击了btn');
    33. 					},
    34. 					change() {
    35. 						console.log('阻止了默认行为');
    36. 					},
    37. 					change2() {
    38. 						console.log('阻止了默认行为也阻止了冒泡');
    39. 					},
    40. 					show(msg) {
    41. 						console.log(msg);
    42. 					},
    43. 					showself() {
    44. 						console.log('我是点击自身才触发');
    45. 					},
    46. 					doThis() {
    47. 						console.log('点击了a');
    48. 					},
    49. 					onScroll() {
    50. 						for (let i = 0; i < 5000; i++) {
    51. 							console.log('@');
    52. 						}
    53. 						console.log('333333');
    54. 					}
    55. 				}
    56. 			})
    57. 		script>
    58. 	body>
    59. html>

     注意：

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


                   
               

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


                3. 修饰符可以串联 常用
                


                        去百度
                

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


                    div1外面
                    

                        div2里面
                    

                


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


                    
                

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

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


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

  • 相关阅读:
    Python基本语法（未完待续）
    Redis底层核心数据结构详解
    net start npcap 系统错误31 解决方案 win11 Wireshark
    SpringCloud之gateway动态路由
    Jmeter 使用正则表达式提取器将返回值全部保存到一个文件中
    Java之TCP,UDP综合小练习一
    MySQL数据库基本操作
    视频播放VideoView
    【3D建模制作技巧分享】Maya模型如何导入zbrush
    Jetpack Compose 1.2 稳定版现已发布！
  • 原文地址：https://blog.csdn.net/m0_68633696/article/details/126143929