Vue事件绑定
一,原生事件绑定1.在原生js中,我们有三种方式为一个属性绑定事件,分别为:在HTML标签上添加事件属性在js中使用html节点的事件属性绑定事件处理程序,例如node.onclick=function(){}在js中使用addEventListener("click",function(){},false)想了解更多,可参考js原生事件绑定二,Vue事件绑定 v-on:1.在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>
更多推荐
已为社区贡献4条内容
所有评论(0)