Vue学习（四）：事件处理

最新推荐文章于 2024-09-24 01:58:55 发布

原创最新推荐文章于 2024-09-24 01:58:55 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #javascript #vue.js #vue

前端学习同时被 2 个专栏收录

119 篇文章

订阅专栏

Vue.js

25 篇文章

订阅专栏

本文介绍了Vue.js中事件的基本使用，包括v-on或@语法绑定事件，强调methods中函数不宜使用箭头函数以保持正确的上下文。示例展示了如何在模板中调用方法并传递参数。接着，讲解了事件修饰符如.prevent、.stop、.once等的用法，以及按键修饰符的应用，包括常见的按键别名和如何自定义按键绑定。最后，提到了Vue.config.keyCodes用于自定义按键别名的功能。

1. 绑定监听

事件的基本使用：
- 使用v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；
- 事件的回调需要配置在methods对象中，最终会在 vm 上；
- methods中配置的函数，不要用箭头函数！否则this就不是 vm 了；
- methods中配置的函数，都是被Vue所管理的函数，this的指向是 vm 或组件实例对象；
- @click="demo"和 @click="demo($event)"效果一致，前者默认传入了时间对象，后者可以传其他参数。

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- <button v-on:click="showInfo">点我提示信息</button> -->
		<button @click="showInfo1">点我提示信息1（不传参）</button>
		<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el:'#root',
		methods:{
			showInfo1(event){
				alert('同学你好！')
			},
			showInfo2(event,number){
				alert(number)
			}
		}
	})
</script>

2. 事件修饰符

prevent：阻止默认事件（event.preventDefault()）
stop：阻止事件冒泡（event.stopPropagation()）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
用法：
- v-on:xxx.事件修饰符或@xxx.事件修饰符
- 可以用.连接，组合使用

3. 按键修饰符

Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊，必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名