事件处理的基本用法

使用v-on:xxx或@xx绑定事件（xxx是事件名称）；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数，因为箭头函数中this指向windows，不是vm；
methods中欧给配置的函数都是被Vue管理的函数，this都是vm或组件实例对象；
@click="demo"和@click="demo($event)的效果一样，但后者可以传参；

案例：

<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>事件处理</h1>
			<button @click="showHobby">点我查看爱好</button>
			<button @click="updateAge($event,22)">点我修改年龄</button>
			<button v-on:click="testArror">测试箭头函数</button>
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				name:'bug_killer',
				hobby:'打麻将',
				age:12,
			},
			methods:{
				showHobby(){
					console.log(this.hobby);
					alert('我的爱好是：'+this.hobby);
				},
				updateAge($event,number){
					this.age = number;
					console.log(this.age)
					console.log(event.target.innerText) //event拿到事件对象，target表示事件目标，这里就是拿到button按钮
					alert('年龄修改成功！！')
				},
				testArror:()=>{
					console.log(this);
					return 'test';
				},
			}
		})
	</script>

事件修饰符

1、修饰符
prevent	阻止默认事件
stop	阻止事件冒泡
once	事件只触发一次
capture	使用事件的捕获模式
self	只有event.target是当前操作的元素时才触发事件
passive	事件的默认行为立即执行，无需等待事件回调执行完毕

2、使用：@click.pervent
注意：修饰符可以连续写，比如：@click.capture.once

Vue2--事件处理

事件处理的基本用法

事件修饰符