vue的事件处理梳理

luoye 2021年07月13日编程语言 358 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"/>