Vue学习（四）：事件处理

最新推荐文章于 2024-05-15 07:38:40 发布

激洪

最新推荐文章于 2024-05-15 07:38:40 发布

阅读量144

点赞数

分类专栏：前端学习 Vue.js 文章标签：学习前端 javascript vue.js vue

本文链接：https://blog.csdn.net/john1516/article/details/124341841

版权

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

119 篇文章 2 订阅

订阅专栏

Vue.js

25 篇文章 0 订阅

订阅专栏

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.自定义键名 = 键码，可以去定制按键别名