Vue中的事件绑定一般通过v-on指令来绑定事件:

事件绑定

v-on:事件绑定的表达式的值可以是js语句,也可以是在methods选项中定义好的方法名(有参数的时候当然需要传参),

在vue事件中,如果要用到事件对象e,要将e作为形参传入函数,并且在执行该函数的时候,传入实参$event,该参数包含事件的一些信息:如事件源(事件发生在谁身上),事件类型等

HTML部分

<div id="container">
		<!-- js表达式 -->
		<span>{{initNum}}</span>
		<button @click="initNum++">点我加一</button>
		<!-- 函数名 -->
		<span>{{initNum}}</span>
		<button @click="addTen(10,$event)">点我加十</button>
		<!-- 函数名 -->
		<span>{{initNum}}</span>
		<button @click="addTwo">点我加二</button>
		<a href="www.baidu.com" @click="goto('禁止打开',$event)" >百度一下</a>
	</div>
Javascript部分

var myApp = new Vue({
			el:"#container",
			data:{
				userName:"张三",
				initNum:10,
			},
			methods:{
				addTen:function(plus,event){
					this.initNum+=plus;//this表示的是当前的Vue实例
					console.log(event.preventDefault());
					window.alert(this.initNum)
				},
				addTwo:function(){
					this.initNum+=2;
					console.log(event)
				},
				goto:function(message,event){
					event.preventDefault();
					window.alert(message);
					console.log(event)
				}
			}
		})

事件修饰符
当然,事件也有自己的修饰符,这里不不再一一举例(有很多),但是基本用法要清楚:

就是在@事件名后加一个点"."跟上修饰符即可,例如@click.stop 阻止事件冒泡,向上传播;.prevent:阻止默认行为.如点击a标签的链接,会打开目标界面的默认行为;@click.once事件只执行一次等等,此外还有一些键盘事件的修饰符(还是事件),并且修饰符可以叠加。

键盘事件

语法:@keydown.(键位的keyCode或键位别名) = callback

例如:@keydown.13 或者@keydown.enter(别名,回车事件);@keydown.38或者@keydown.up(别名,按方向键上--事件);
 自定义键盘事件
全局:Vue.config.keyCodes ={别名:对应的keycode },然后就可以在键盘事件中按相应的键,就会有反应了。


Logo

前往低代码交流专区

更多推荐