• Vue中的事件监听

    1. v-on的基本使用

    ​ 在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    8.   <title>Documenttitle>
    9. head>
    10. <body>
    11.   <div id="app">
    12.       <h2>{{count}}h2>
    13.       
    14.       <button @click="increment">加button>
    15.       <button @click="decrement()">减button>
    16.   div>
    17.   <script>
    18.     const app = new Vue({
    19.       el:"#app",
    20.       data:{
    21.         count:0
    22.       },
    23.       methods: {
    24.         increment(){
    25.           this.count++
    26.         },
    27.         decrement(){
    28.           this.count--
    29.         }
    30.       }
    31.     })
    32.  
    33.   script>
    34. body>
    35. html>

    ​ 使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的语法糖，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的。

    2. v-on的参数传递

    ​ 了解了v-on的基本使用，现在需要了解参数传递。

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>Documenttitle>
    8. head>
    9. <body>
    10.   <div id="app">
    11.     
    12.     <button @click="btnClick">按钮1button>
    13.     <button @click="btnClick()">按钮2button>
    14.     
    15.     <button @click="btnClick2(123)">按钮3button>
    16.     <button @click="btnClick2()">按钮4button>
    17.     <button @click="btnClick2">按钮5button>
    18.     
    19.     <button @click="btnClick3($event,123)">按钮6button>
    20.   div>
    21.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    22.   <script>
    23.     const app = new Vue({
    24.       el:"#app",
    25.       methods:{
    26.         btnClick(){
    27.           console.log("点击XXX");
    28.         },
    29.         btnClick2(value){
    30.           console.log(value+"----------");
    31.         },
    32.         btnClick3(event,value){
    33.           console.log(event+"----------"+value);
    34.         }
    35.       }
    36.     })
    37.   script>
    38. body>
    39. html>
    1. 事件没传参，可以省略()
    2. 事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
    3. 如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。

    按钮4调用btnClick2(value){}，此时undefined。按钮5调用时省略了()，会自动传入原生event事件，如果我们需要event对象还需要传入其他参数，可以使用$event对象。

    3. v-on的修饰词

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>v-on的修饰符title>
    8.   <style>
    9. 	  .div {
    10. 	    height:80px;
    11. 	    background:#f00;
    12. 	  }
    13.   style>
    14. head>
    15. <body>
    16.   <div id="app">
    17.     
    18.     <div @click="divClick">
    19.         <button @click.stop="btnClick">按钮1button>
    20.     div>
    21.     
    22.     <form action="www.baidu.com">
    23.       <button type="submit" @click.prevent="submitClick">提交button>
    24.     form>
    25.     
    26.     <form @submit.prevent=''>
    27. 	   账号<input type="text" name="user"/>
    28. 	   密码<input type="text" name="password" @keyup.enter="submit"/>
    29. 	    <input type="submit"  value="登录"/>
    30.    form>
    31.   
    32. 	<button @click.once="showInfo">点我提示信息button>	  
    33.   
    34. 	<div class="box1" @click.capture="show(111)">
    35. 		div1外面
    36. 	<div class="box2" @click="show(222)">
    37. 		div2里面
    38. 	div>
    39. 	div>
    40.  
    41. 	<div class="div" @click.self="showself">
    42. 	   <button @click="showself">点我button>
    43. 	div>
    44. 	  
    45.   div>
    46.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    47.   <script>
    48.     const app = new Vue({
    49.       el:"#app",
    50.       methods:{
    51.         btnClick(){
    52.           console.log("点击button");
    53.         },
    54.         divClick(){
    55.           console.log("点击div");
    56.         },
    57.         submitClcik(){
    58.           console.log("提交被阻止了")
    59.         },
    60.         submit(){
    61.           console.log("keyup点击")
    62.         },
    63. 	showInfo(){
    64. 	  alert('web学习真有趣')
    65. 	},
    66. 	show(msg){
    67. 	  console.log(msg)
    68. 	},
    69. 	showself(e){
    70. 	  console.log(e.target);
    71. 	},  
    72.       }
    73.     })
    74.   script>
    75. body>
    76. html>
    1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
    2. .prevent 调用event.preeventDefault阻止默认行为。
    3. .enter监听键盘事件;
    4. once 事件只触发一次（常用）

     5.capture 使用事件的捕获模式；

    6.self 只有event.target是当前操作的元素时才触发事件；

    7.passive 事件的默认行为立即执行，无需等待事件回调执行完毕；

    1.Vue中常用的按键别名： 回车 => enter

    删除 => delete (捕获“删除”和“退格”键)

    退出 => esc

    空格 => space

    换行 => tab (特殊，必须配合keydown去使用)

    上 => up

    下 => down

    左 => left

    右 => right

    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

    3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

    (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

    (2).配合keydown使用：正常触发事件。

    4.也可以使用keyCode去指定具体的按键（不推荐）

    5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>键盘事件title>
    6. 		
    7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<h2>{{msg}}h2>
    13. 			<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="show">
    14. 		div>
    15. 	body>
    16.  
    17. 	<script type="text/javascript">
    18. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    19. 		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
    20.  
    21. 		new Vue({
    22. 			el:'#app',
    23. 			data:{
    24. 				msg:'web前端'
    25. 			},
    26. 			methods: {
    27. 				show(e){
    28. 					// console.log(e.key,e.keyCode)CapsLock这样的，应该使用@keyup.caps-lock="show"
    29. 					console.log(e.target.value)
    30. 				}
    31. 			},
    32. 		})
    33. 	script>
    34. html>

    也可以使用keyCode去指定具体的按键（不推荐）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>键盘事件title>
    6. 		
    7. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<h2>{{msg}}h2>
    13. 			<input type="text" placeholder="按下回车提示输入" @keyup.13="show">
    14. 		div>
    15. 	body>
    16.  
    17. 	<script type="text/javascript">
    18. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    19. 		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
    20.  
    21. 		new Vue({
    22. 			el:'#app',
    23. 			data:{
    24. 				msg:'web前端'
    25. 			},
    26. 			methods: {
    27. 				show(e){
    28. 					// console.log(e.key,e.keyCode)CapsLock这样的，应该使用@keyup.caps-lock="show"
    29. 					console.log(e.target.value)
    30. 				}
    31. 			},
    32. 		})
    33. 	script>
    34. html>

    另外一种 失去登录文本框焦点时 可以使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>v-on的修饰符title>
    8. head>
    9. <body>
    10.   <div id="app">
    11.     
    12.    <form @submit.prevent=''>
    13. 	   账号<input type="text" name="user"/>
    14. 	   密码<input type="text" name="password" />
    15. 	    <input type="submit"  value="登录" @keyup.enter="submit"/>
    16.    form>
    17.  
    18.   div>
    19.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    20.   <script>
    21.     const app = new Vue({
    22.       el:"#app",
    23.       methods:{
    24.         submit(){
    25.           console.log("keyup点击")
    26.         }
    27.       },
    28. 	  created() {
    29. 	      let that = this;
    30. 	      document.onkeydown =function(e){
    31. 	        e = window.event || e;
    32. 	        if(e.code=='Enter'||e.code=='enter'){//验证在登录界面和按得键是回车键enter
    33. 	          that.submit();//登录函数
    34. 	        }
    35. 	      }
    36. 	    }
    37.     })
    38.   script>
    39. body>
    40. html>

  • 相关阅读:
    第15届蓝桥STEMA测评真题剖析-2023年10月29日Scratch编程初中级组
    加快make编译速度的另一种方法
    为什么我们不支持手工上传镜像
    Bootstrap Blazor 使用模板创建项目
    算数平均法和加权平均法
    《C++避坑神器·二十六》结构体报重定义错误问题和std::variant同时存储不同类型的值使用方式
    idea 创建spring boot工程
    Day17--购物车页面-商品列表-封装NumberBox
    软件系统开发|公众号都有哪些展现形式？
    React-组件-props 校验 类型 是否必填 默认值
  • 原文地址：https://blog.csdn.net/helongzhi/article/details/126047823