当前位置: 首页>前端>正文

vue的window resize事件 vue页面事件


文章目录

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



前言

本篇复习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 = new Vue({
				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的window resize事件 vue页面事件,vue的window resize事件 vue页面事件_javascript,第1张

二、事件修饰符

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://www.xamrdz.com/web/2e21937566.html

相关文章: