Vue中的事件处理方法：

一、事件绑定基础语法有两种写法：

1、直接写函数名,@click="handleClick";

2、加$event,@click="handleClicks($event,参数)"参数可选,

$event是内置事件对象 ;

好处:不但可以传事件对象,还可以传其他的参数

<div id="app">
		<!-- 1.普通用法 -->
		<button @click="handleClick">Button</button>
		<br />
		<!-- 2.传入参数-->
		<button @click="handleClicks($event,1,2,3)">eventButton</button>
		<!-- 3.绑定对象 -->
	    <button v-on="{click: btnClick, mousemove: mouseMove}">特殊按钮3</button>
	</div>
	<script>
       var vm = new Vue({
              el:'#app',
              methods:{
              	handleClick:function(e){
              		console.log(e)
              	},
              	handleClicks:function(e,one,two,three){
              		console.log(e,one,two,three)
              	},
              	btnClick() {
		        	console.log("按钮被点击了");
		        },
		        mouseMove() {
		        	console.log("鼠标移动");
		        },
              }
       })
	</script>

二、事件修饰符：

1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）
2、@click.stop：阻止事件向外冒泡
3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。】
【e.target.value：e.target表示触发事件的该DOM元素节点，e.target.value表示获取该结点的值】
4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行
5、@click.capture：把冒泡机制改成捕获，冒泡是从内到外，捕获是从外到内。

<div id="app">
	<!-- 点击时不希望页面进行跳转,需要阻止form表单的默认行为:@click.prevent-->
	<form action="/abc" @click.prevent>
		<input type="submit">
	</form>
</div>

三、按键修饰符【控制按下哪个按键时，相对应的事件才会被执行】：

1、@keydown：按键按下时就会执行绑定的函数
2、@keydown.enter：只有enter键触发keydown事件才会执行绑定的函数
3、@keydown.tab：只有tab键触发keydown事件才会执行绑定的函数

<div id="app">
        <!--按下enter键才触发keydown事件-->
	<input @keydown.enter="handleKeyDown">
</div>
<script>
       var vm = new Vue({
              el:'#app',
              methods:{
              	handleKeyDown:function(e){
              		console.log(e.target.value)
              	}
              }
       })
</script>

四、系统修饰符：

ctrl、alt、shift、meta
要触发绑定的函数，不仅要按下按键，同时还需要按下相应的系统修饰符按键。例如：@keydown.ctrl="handle"，必须同时按下ctrl键和其他的按键才能执行handle函数。

<div id="app">
    <!--同时按下ctrl键才出发Keydown事件-->
    <input @keydown.ctrl="handleKeyDown">
</div>
<script>
       var vm = new Vue({
              el:'#app',
              methods:{
              	handleKeyDown:function(e){
              		console.log(e.target.value)
              	}
              }
       })
</script>

五、鼠标修饰符：

1、@click.right：只有点击鼠标右键才会执行。
2、@click.left：只有点击鼠标左键才会执行。
3、@click.middle：只有点击鼠标中键才会执行。

<div id="app">
	<!-- 监听鼠标右键点击,右键点击才执行handleClick -->
	<div @click.right="handleClick">click</div>
</div>
<script>
       var vm = new Vue({
              el:'#app',
              methods:{
              	handleClick:function(e){
              		console.log('right')
              	}
              }
       })
</script>