【VUE】事件

最新推荐文章于 2024-08-04 21:39:31 发布

XiaoYabeI

最新推荐文章于 2024-08-04 21:39:31 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/XiaoYabeI/article/details/122708944

版权

VueJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件的基本使用

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件修饰符</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
		<div id="app">
			<h1>Hello,{{name}}</h1>
            <button v-on:click="showInfo1">点我提示信息1（不传参）</button>
            <button @click="showInfo2(100,$event)">点我提示信息2（传参）</button>
		</div>
 
		<script type = "text/javascript">
            Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
 
            // 创建Vue实例
		    const vm = new Vue({
		    	el: '#app',
		    	data:{
				    name:'武林外传'
			    },
                methods:{
                    //点击按钮调用函数时默认会传递event对象
                    showInfo1(event){
                        //点击按钮显示弹窗
                        alert('欢迎来到同福客栈！')
                        /* 
                        //event.target拿到发生事件的事件目标，在这里即这个按钮元素monseEvent，比如event.target.innerText是按钮中的文本
                        console.log(event.target.innerText)//点我提示信息
                        console.log(this === vm)//true
                        */
                    },
                    //事件回调传参，事件发生时传递参数
                    showInfo2(number,event){
                         console.log(number)//100
                    }
                }
		    })
	    </script>
	</body>
</html>

事件修饰符

prevent：阻止默认事件（常用）比如a标签自动跳转href链接（对应event.preventDefault()）
stop：阻止事件冒泡（常用）（对应event.stopPropagation()）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕（对画面有一定优化作用）

补充: @scroll 滚动条滚动触发事件；@wheel鼠标滚轮滚动触发事件

修饰符可以连续使用

比如：@click.prevent.stop点击触发事件之后先阻止默认事件再阻止冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件修饰符</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 准备好一个容器 -->
        <!-- div内触发了事件会向上冒泡从而也触发div的事件 -->
		<div id="app" @click="showInfo">
			<h1>Hello,{{name}}</h1>
            <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
		</div>
 	</body>
	<script type = "text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		const vm = new Vue({
		    el: '#app',
		    data:{
				name:'武林外传'
			},
            methods:{
                showInfo(event){
                //阻止该事件的默认行为
                //e.preventDefault()//可以用@click.prevent表示
                alert('你点了百度一下')
            }
         }
		 })
    </script>
</html>

键盘事件

Vue中常用的按键别名：
1. 回车=>enter
2. 删除=>delete
3. 退出=>esc
4. 空格=>space
5. 换行=>tab（特殊，本身会切换焦点，必须配合keydown去使用）
6. 上=>up
7. 下=>down
8. 左=>left
9. 右=>right
Vue未提供别名的按键，可以使用按键原始的Key值去绑定，但注意要转为kebab-case（）短横线命名
系统修饰键（用法特殊）：ctrl、alt、shift、meta
1. 配合keyup使用：按下修饰键的同时，在按下其他键（组合键使用），随后释放其他键，事件才被触发；
2. 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐），主要通过按键名字指定
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不太推荐）

比如：

【@keydown="eventName"】:按下按键不用抬起即触发事件；

【@keyup.enter="eventName"】:按下回车并抬起即触发事件；

【@keyup.caps-lock="eventName"】:按下大小写切换键触发，一般多单词的按键需要小写，并用[-]连接不同的词；

【@keyup.ctrl.y】:按下ctrl+y触发事件

事件函数传回的event参数，event.key可以看到按键名字。

XiaoYabeI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【VUE】事件

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

扫一扫

专栏目录