Vue:Vue事件整理

文章目录

  • 前言
  • 一、Vue基本事件
        • this对象
        • 传递参数
        • 总结
  • 二、事件修饰符
  • 三、键盘事件
        • keyup/keydown
  • 四、ElementUi

前言

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

一、Vue基本事件

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

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

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

<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 = new Vue({
				el:"#app",
				methods:{
					todo:function() {
						//方法执行的逻辑
					}
				}
			})
		</script>
	</body>

this对象

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

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

传递参数

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

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

总结

Vue:Vue事件整理

二、事件修饰符

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>
标签 , ,

发表回复