VUE L 事件处理 ⑤

SYFStrive

已于 2023-06-24 11:26:55 修改

阅读量389

点赞数

分类专栏： VUEJS 文章标签： vue.js javascript 前端

于 2023-06-20 22:15:51 首次发布

本文链接：https://blog.csdn.net/m0_61490399/article/details/129952001

版权

VUEJS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

提示：以下是本篇文章正文内容

$V u e j s$

简介： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方

中文： https://cn.vuejs.org/
英文： https://vuejs.org/
Vue2API : https://v2.cn.vuejs.org/
Vue2 相关包： https://github.com/vuejs/awesome-vue
Vue2 入门安装官方：https://v2.cn.vuejs.org/v2/guide/installation.html
Vue 相关插件： https://awesomejs.dev/for/vue/

$E v e n t j s$

注意

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

绑定监听
1. v-on:xxx=“fun”
2. @xxx=“fun”
3. @xxx=“fun(参数)”
4. 默认事件形参: event
5. 隐含属性对象: $event
  –
事件修饰符
1. prevent : 阻止事件的默认行为 event.preventDefault()
2. stop : 停止事件冒泡 event.stopPropagation()
3. once: 事件只触发一次
4. capture：使用事件的捕获模式
5. self ：只有 event.target 是当前操作的元素时才触发的事件
6. passive ：事件默认行为立即执行，无需等待事件回调执行完毕
  –
按键修饰符
1. keycode : 操作的是某个keycode值的键
2. keyName : 操作的某个按键名的键(少部分)
  –
键盘使用

在这里插入图片描述

代码演示 🎊

<!-- 
		事件绑定注意事项：
				1.事件的回调都配置在`methods`对象中
				2.methods中的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
				3.methods中的配置的函数，不要用箭头函数！！！！，否则this丢失
-->

<!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>欢迎来到{{school}}学习</h2>

		<!-- 绑定事件---标准方式 -->
		<button v-on:click="show1">点我提示：信息1（v-on绑定）</button> <br /><br />

		<!-- 绑定事件---简写方式 -->
		<button @click="show1">点我提示：信息1（@绑定）</button> <br /><br />

		<!-- 绑定事件---传递参数 -->
		<button @click="show2($event,666)">点我提示：信息2 + 传递的参数</button> <br /><br />

		<!-- 绑定事件---阻止默认行为，prevent叫事件修饰符 -->
		<a href="https://www.baidu.com" @click.prevent="show3">点我提示：信息3 （阻止默认行为）</a> <br /><br />

		<!-- 绑定事件---阻止冒泡，事件修饰符可以连写，且顺序可以随意改变 -->
		<div @click="show4">
			<a href="https://www.baidu.com" @click.stop.prevent="show4">点我提示：信息4 （阻止冒泡）</a>
		</div><br />

		<!-- 键盘事件 -->
		<input @keyup.enter="show5" type="text" placeholder="按下回车提示数据">

	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: { //配置数据
				school: 'OpenAI',
			},
			methods: { //用于配置方法
				show1(event) {
					//console.log('信息1',event.target.innerText)
					alert('信息1')
				},
				show2(event, number) {
					console.log(event)
					alert('信息2---' + number)
				},
				show3(event) {
					//event.preventDefault(); //靠程序员手动阻止默认行为
					alert('信息3')
				},
				show4(event) {
					// event.stopPropagation(); //靠程序员手动阻止冒泡
					alert('信息4')
				},
				show5(event) {
					// console.log(event.keyCode) //输出按键编码值
					// console.log(event.key) //输出按键名称
					alert(event.target.value)
				}
			}
		})
	</script>
</body>

</html>