0


Vue:Vue事件整理

文章目录


前言

本篇复习Vue中的事件处理,包含事件基本响应、事件修饰符、键盘事件等内容

一、Vue基本事件

Vue中,设置点击、鼠标滚动和键盘输入等相应事件,可以用v-on指令进行绑定

v-on指令是事件绑定指令,当用户需要点击,按下键盘,滚动鼠标等操作时,想要添加一些自己的逻辑处理时,就可以为特定的元素绑定一些特定的事件。

例如:我们先在被vue实例挂载的标签div中,放入一个按钮为input标签,我们为这个input标签设置事件,做法如下:

  • 在标签内部写入v-on指令,冒号(:)后面就是事件名,等号(=)后面就是需要绑定的事件方法名称;
  • @事件名=事件方法名称
<div id="app"><input type="button" value="事件绑定" v-on:click="方法名"><input type="button" value="事件绑定" v-on:mouseenter="方法名"><input type="button" value="事件绑定" v-on:dblclick="方法名"><input type="button" value="事件绑定" @click="方法名"><input type="button" value="事件绑定" @mouseenter="方法名"><input type="button" value="事件绑定" @dblclick="方法名"></div>

而我们对应的方法名,是写在相关挂载的Vue对象的methods属性中,换句话说,事件的回调需要设置在methods中:

<body><div id="app"><input type="button" value="事件绑定" v-on:click="todo"><input type="button" value="事件绑定" v-on:mouseenter="todo"><input type="button" value="事件绑定" v-on:dblclick="todo"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var  app =newVue({el:"#app",methods:{todo:function(){//方法执行的逻辑}}})</script></body>

this对象

在Vue函数中,this默认指向包含函数的Vue对象,但是如果使用箭头函数,则this对象表示窗体对象

在日常开发中,通常不建议使用箭头函数,因为这样会改变函数的this对象,而我们通常需要在方法内部通过this关键字访问定义在data中的数据

传递参数

v-on传递参数主要有三种情况

  • 无参方法;
  • 有参方法;
  • 既需要参数,也需要浏览器产生的event事件

无参方法实现时,可以在调用方法时加入小括号,也可以不加小括号;
当方法有参数时,需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号,默认将浏览器产生的event事件传给方法;
当方法即需要参数,又需要event事件时,必须使用$event才可以返回事件; 当使用event时或者不写时返回undefined;
当方法中不填写任何值时,参数与evnet事件均为undefined; 当不填写小括号时,默认将event事件传入方法

总结

在这里插入图片描述

二、事件修饰符

Vue中,可以通过在事件名加上一些修饰符,为事件增添相对应的效果

例如,我们希望在点击一个a标签时,能够显示一个弹窗之类的效果,但是不希望其进行跳转,我们可以使用prevent标签,阻止其默认行为

具体如下:
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

例:

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!--滚动事件的默认行为(即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成  --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div>

三、键盘事件

Vue中,我们可以通过为键盘按下/键盘弹起这一些行为设立相应的触发事件,我们可以通过键盘码/键盘别名对键盘按下设立事件,也可以通过键盘别名设立相关事件,具体如下:

keyup/keydown

<input v-on:keyup.13="submit"><input @keyup.enter="submit"><!-- 缩写形式 -->

针对不同的事件,我们选择keyup/keydown两种形式设置事件,这个结合具体的应用场景选择即可

相应键盘具体的按键别名如下,我们推荐通过键盘按键别名进行事件设置:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

对于一些组件,如Ctrl+1 2 3,Alt + 1 2 3,我们可以通过书写多个.的方式进行修饰

<!-- Alt +C--><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是,修饰键和 keyup 事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发 keyup.ctrl,必须按下 ctrl 时释放其他的按键;单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 --><input @keyup.alt.67="clear"><!-- 按下Alt + 释放任意键触发 --><input @keyup.alt="other"><!-- 按下Ctrl + enter时触发 --><input @keydown.ctrl.13="submit">

四、ElementUi

对于elementUI的input,我们需要在后面加上.native, 因为elementUI对input进行了封装,原生的事件不起作用。

<input v-model="form.name" placeholder="昵称"@keyup.enter="submit"><el-input v-model="form.name" placeholder="昵称"@keyup.enter.native="submit"></el-input>

本文转载自: https://blog.csdn.net/qjyws/article/details/125346339
版权归原作者 Julian Q 所有, 如有侵权,请联系我们删除。

“Vue:Vue事件整理”的评论:

还没有评论