vue中一般事件处理总结

vue事件处理
1.事件绑定监听

<button @click='event1'>点击1</button>//无参数点击事件
<button @click='event2('123')'>点击1</button>//带参数点击事件
<button @click='event3'>点击1</button>或者<button @click='event3($event)'>点击1</button>//获取button文本,不传默认event
<button @click='event4('123',$event)'>点击1</button>//参数和获取button文本

methods:{
	event1(){
		console.log('无参数事件')
	},
	event2(number){
		console.log(number)
	},
	event3(event){
		console.log(event.target.innerHTML)
		//输出enent3
	},
	event4(number,event){
		console.log(numbet+'--'+event.target.innerHTML)
	}
}

2.事件修饰符

<div style='height:200px;width:200px;background:yellow' @clock='event5'>
	<div style:='height:100px;width:100px;background:red' @clock.stop='event6'></div>
</div>
//事件的默认行为
<div>
	<a herg='http://www.baidu.com' @clock.prevent='event7'></a>
</div>

methods:{
	//阻止事件冒泡
	event5(){
		console.log('这是大的div')
	},
	event6(event){
		 //原生写法是
		 //event.stopPropagation()
		 //在vue中，你需要在html的方法后面加上.stop就可以阻止事件冒泡
		 console.log('这是小的div')
	},
	//事件的默认行为
	event7(event){
		//原生写法
		//event.preventDefault()
		//在vue中在html中加.prevent阻止事件的默认行为
		console.log('事件的默认行为')
	}
}

3.按键修饰符

//按回车建确定
<div>
	<input type='text' @keyup.13='event8'/>
</div>

methods:{
	event8(event){
		// 每一个键盘按钮都有一个唯一的keyCode，enter的keyCode是13,n你如果不知道每个键的keyCode，你按键可以打印一下
		//console.log(event.keyCode)
		//原生的写法  vue中你直接可以把对应的keyCode写到keyup的后面
		//if(event.keyCode===13){
		console.log('按回车确定')
		//}
	}
}