IT序号网

vue的事件处理梳理知识解答

luoye 2021年07月13日 编程语言 130 0

一、事件函数

1、v-on绑定click,执行一个函数

		<input type="button" v-on:click="test" value="点我"> 
 
		<!-- click绑定一个函数 --> 

  

2、v-on绑定click执行一个表达式

		{{gread}} 
 
		<input type="button" v-on:click="gread+=1" value="点我"> 
 
		<!-- click绑定一个表达式 --> 

  

3、v-on绑定click执行一个带有参数的方法,这个参数是vue的属性

		{{gread}} 
 
		<input type="button" v-on:click="click(gread)" value="点我"> 
 
 
		<!-- click绑定一个函数,传递一个属性给函数做为参数 --> 

  

需要在方法中接受一个参数

 4、v-on绑定一个click事件,执行一个带有一个参数的方法,这个参数是一个字符串

		{{gread}} 
 
		<input type="button" v-on:click="click('hello vue')" value="点我"> 
 
 
		<!-- click绑定一个函数,传递一个字符串给函数作为参数 --> 

  

 5、v-on绑定的事件执行的函数有一个默认的参数就是event,这个不需要我们执行

<input type="button" v-on:click="testObj" value="点我"> 

  

二、事件修饰符

 1、prevent修饰符,阻止默认行为

		<form v-on:submit.prevent="tijiao"> 
			<input type="submit" value="提交"> 
		</form> 
 
		<!-- .prevent阻止默认行为的演示,这个默认行为就是刷新 --> 

  

还可用这样,我们不需要带任何方法

		<form v-on:submit.prevent> 
			<input type="submit" value="提交"> 
		</form> 
		<!-- 还可以只有修饰符,没有函数 --> 

  

2、stop修饰符,阻止冒泡行为

	<div class="div1" v-on:click="div1"> 
			<div class="div2" v-on:click.stop="div2"></div> 
		</div> 

看上面的例子,外层div包裹内层div,默认情况下,我们点击内层div,就会执行div2函数,然后执行div1函数,加了stop修饰符后,点击内层div,就只会执行div2函数,不会执行div1函数

3、capture修饰符,捕获的演示

		<div class="div1" v-on:click.capture="div1"> 
			<div class="div2" v-on:click.capture="div2"></div> 
		</div> 
		<!-- capture捕获的演示,先执行父节点的绑定事件,在执行自己的绑定事件,默认是先执行自己的绑定的事件,后执行父节点绑定的事件 --> 

  

4、self修饰符

		<div class="div1" v-on:click.self="div1"> 
			<div class="div2"></div> 
		</div> 
 
 
		<!-- self。只给自己绑定事件,对子元素不会绑定事件,如果没有self修饰符,则点击子元素也会触发div1这个函数 --> 

  

上面的例子,点击div2对应的区域,是不会紫红星div1方法的,如果没有使用self的修饰符,则点击div1和div2的区域,都会执行div1的方法

  

5、once修饰符,只会执行一次

		<div class="div1" v-on:click.once="div1"> 
 
 
			<div class="div2"></div> 
		</div> 
 
 
		<!-- once修饰符,意思是这个事件只执行一次 --> 

  

 三、键值修饰符

1、常用的键盘的keyCode需要记住

		{{mes}} 
		<input type="text" v-on:keydown="testKey"/> 
<!-- 					0到9的keyCode分别为48到57 
					左上右下的keyCode分别为37到40 --> 

  

我们看下testKey这个方法,获取input标签输入的值,然后赋值个mes这个属性

 2、我们可以使用下面的方法实现上面一样的效果,使用键值修饰符,只有敲回车键才执行

					{{mes}} 
		<input type="text" v-on:keydown.13="testKeynew"/> 

  

 4、还有实现组合键

		<!-- 修饰键,可以两个一起按 --> 
		<input type="text" v-on:keydown.ctrl.13="testKeynew"/> 
		<input type="text" v-on:keydown.alt.13="testKeynew"/> 
		<input type="text" v-on:keydown.shift.13="testKeynew"/> 
		<input type="text" v-on:keydown.meta.13="testKeynew"/> 

  

四、鼠标修饰符


发布评论

分享到:

IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue的条件渲染和列表渲染介绍知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。