• 七、【VUE基础】事件处理

    七、事件处理

    1、Vue中的事件

    1、事件的基本使用

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

    2、CODE

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h2>你好{{name}}同学h2>
			
			<button @click="showInfo1">点我（不传参）button>
			<button @click="showInfo2($event, 555)">点我（传参）button>
		div>
	body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'Mr.Wang',
			},
			methods:{
				showInfo1(event){
					console.log('点我（不传参）方法开始')
					console.log(event.target.innerText)
					console.log(this === vm) //此处的this是VueModel
					console.log('点我（不传参）方法结束')
				},
				showInfo2(event,number){
					console.log('点我（传参）方法开始')
					console.log(event,number)
					console.log(event.target.innerText)
					console.log(this) //此处的this是vm
					console.log('点我（传参）方法结束')
				}
			}
		})
	script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    3、Result

    在这里插入图片描述

    2、事件修饰符

    1、Vue中的事件修饰符

    1. prevent：阻止默认事件（常用）

    2. stop：阻止事件冒泡（常用）

    3. once：事件只触发一次（常用）

    4. capture：使用事件的捕获模式，在捕获阶段就完成触发事件

      1. 正常触发事件经历两个阶段：先从外往内进行捕获，再从内往外冒泡触发
      2. 在这里插入图片描述

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

      1. 也可以起到阻止冒泡的作用

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

      1. 一般元素正常触发默认行为的顺序是：先执行完回调，再触发默认行为
      2. 如果回调方法执行过程过于漫长，就会导致页面严重卡顿，元素的默认行为迟迟得不到触发

    2、CODE

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符title>
		
		<script type="text/javascript" src="../js/vue.js">script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		style>
	head>
	<body>
		
		<div id="root">
			<h2>欢迎{{name}}进来学习h2>
			
			<a href="http://www.baidu.com" @click.prevent="showInfo($event, 'prevent')">点我(prevent)a>

			
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo($event, 'stop')">点我(stop)button>
				
				
			div>

			
			<button @click.once="showInfo($event, 'once')">点我(once)button>

			
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				div>
			div>

			
			<div class="demo1" @click.self="showInfo($event, 'self')">
				<button @click="showInfo">点我button>
			div>

			
			<ul @wheel.passive="buzyCB" class="list">
				<li>1li>
				<li>2li>
				<li>3li>
				<li>4li>
			ul>

		div>
	body>

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

		new Vue({
			el:'#root',
			data:{
				name:'Mr.Wang'
			},
			methods:{
				showInfo(e, modifier = 'common'){
					// e.preventDefault(); // 正常情况下调这个方法阻止默认行为
					// e.stopPropagation(); // 正常情况下调这个方法阻止冒泡
					console.log(modifier, '：',e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				buzyCB(){
					for (let i = 0; i < 10000; i++)
						console.log('~')
					console.log('累屁了都！')
				}
			}
		})
	script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101

    3、Result

    在这里插入图片描述

    3、键盘事件

    1、Vue的键盘事件

    1. Vue中常用的按键别名
      1. 回车 => enter
      2. 删除 => delete (捕获“删除”和“退格”键)
      3. 退出 => esc
      4. 空格 => space
      5. 换行 => tab (特殊，必须配合keydown去使用)
      6. 上 => up
      7. 下 => down
      8. 左 => left
      9. 右 => right
    2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
      1. eq：@keydown.Enter
      2. eq：@keydown.caps-lock
        1. 注意：如果是多个单词组成需要全小写并用"-"连接（kebab-case（短横线命名））
    3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
      1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
      2. .配合keydown使用：正常触发事件
      3. 如果想同时按两个键才触发事件，指定的第二个键可连续写
        1. eq：@keydown.ctrl.y 按下 Ctrl+Y 才触发
    4. 也可以使用keyCode去指定具体的按键（不推荐）
      1. eq：@keydown.13
    5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

    2、CODE

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h2>欢迎{{name}}~h2>
			<input type="text" placeholder="按下回车提示输入" 
                   @keydown.enter="showInfo($event, 'enter')"><br/>
			<input type="text" placeholder="按下回车提示输入" 
                   @keydown.huiche="showInfo($event, '自定义')">
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'Mr.Wang'
			},
			methods: {
				showInfo(e, modifier){
					// if(e.keyCodes !== 13) return // 普通js写法是使用keyCode判断按键
					console.log(e.key, '-', e.keyCode, '--', 
                                modifier, '--value：', e.target.value)
				}
			},
		})
	script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    3、Result

    在这里插入图片描述

  • 相关阅读:
    [NOIP2013 普及组] 计数问题
    【虹科直播回顾】笔记及问题解答 | AR解决方案助力数字工厂降本增效
    NOIP 2022 游记
    『从零开始学小程序』媒体组件audio组件
    数据链路层-点对点PPP(point-to-point protocal)
    java计算机毕业设计飞羽羽毛球馆管理系统MyBatis+系统+LW文档+源码+调试部署
    iPhone 15 换 USB-C 或藏“心机”，爆料者：只有 Pro 版提速，其他限速 USB 2.0
    Linux —— 基础IO
    3dmax如何进行网络渲染？网渲云渲染渲染农场怎么用？
    蓝桥杯1050
  • 原文地址：https://blog.csdn.net/qq_30769437/article/details/126068905