Vue事件绑定

一，前言

1.在vue中，指令系统的v-on指令用于事件的绑定。

二，v-on基础使用

1.所有标签支持的事件，都可以用v-on绑定，例如：v-on:click、v-on:dbldick、v-on:change等等。

2.v-on可以使用符号@来简写

<button @sumbit="sengMsg"></button>

3.我们在Vue Option Api的methods选项中定义事件处理函数。

methods:{
	sengMsg(e){
		console.log(e) //原生事件对象
	},
}

4.除了上述的方法，我们可以使用内联处理器的方法，在绑定事件时调用事件函数传递参数。

<button @sumbit="sengMsg('hi')"></button> 

5.使用内联方法时，要想获得原生事件对象，需要主动添加$event

<button @sumbit="sengMsg($event,'hi')"></button> 

methods:{
	sengMsg(e,arg1){
		console.log(arg1) // hi
		console.log(e) //原生事件对象
	},

三，v-on绑定多个事件

1.v-on可以绑定多个事件，接受一个对象，对象的键是事件类型，对象的值是事件处理函数

<a v-on="{click:clickMethod,mouseover:mouseover}"></a>

2.v-on事件还可以绑定多个处理函数，函数按顺序执行。

<a v-on:click='clickmethod1(),cliclmethod2()'></a>

四，组件上绑定原生事件

1.要想在自定义的组件上绑定一个原生事件，直接绑定是无效的，需要使用.native修饰符。

<component v-on:focus.native='fn'/>

五，事件修饰符

1.vue的理念是：方法中只包含纯粹的数据逻辑，而不是去处理 DOM 事件细节。因此vue框架为我们提供了事件修饰符，用于处理DOM事件细节。

2.常用事件修饰符

• .stop 阻止事件继续传播，也就可以达到event.preventDefault()的作用

<p @click.stop="count+=1">{{count}}</p>

• .once事件只会触发一次。

<p @click.once="count+=1">{{count}}</p>

• .self事件由自身触发，而不是通过内部传出。

<p @mouseover.self="count+=1">{{count}}</p>